Vue.js => Utiliser "this" dans Vue

Introduction

L' une des erreurs les plus courantes que nous trouvons dans le code Vue sur StackOverflow est l'utilisation abusive de this . Les erreurs les plus courantes tombent généralement dans deux domaines, en utilisant this dans callbacks de promesses ou d' autres fonctions asynchrones et en utilisant des fonctions de direction pour définir les méthodes, les propriétés de calcul, etc.

FAUX! Utiliser "this" dans un rappel dans une méthode Vue.

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomethingAsynchronous(){
      setTimeout(function(){
        // This is wrong! Inside this function,
        // "this" refers to the window object.
        this.foo = "baz";
      }, 1000);
    }
  }
})

FAUX! Utiliser "this" dans une promesse.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    $.getJSON("http://swapi.co/api/people/", function(data){
      // Again, this is wrong! "this", here, refers to the window.
      this.people = data.results;
    })
  }
})

DROITE! Utilisez une fermeture pour capturer "ceci"

Vous pouvez saisir la bonne this aide d' une fermeture .

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    // Before executing the web service call, save this to a local variable
    var self = this;
    $.getJSON("http://swapi.co/api/people/", function(data){
      // Inside this call back, because of the closure, self will
      // be accessible and refers to the Vue object.
      self.people = data.results;
    })
  }
})

DROITE! Utilisez bind.

Vous pouvez lier la fonction de rappel.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted:function(){
    $.getJSON("http://swapi.co/api/people/", function(data){
      this.people = data.results;
    }.bind(this));
  }
})

DROITE! Utilisez une fonction de flèche.

new Vue({
  el:"#star-wars-people",
  data:{
    people: null
  },
  mounted: function(){
    $.getJSON("http://swapi.co/api/people/", data => this.people = data.results);
  }
})

Mise en garde! Fonctions fléchées sont une syntaxe introduite en Ecmascript 2015. Il n'a pas encore été pris en charge mais tous les navigateurs modernes, donc ne l' utiliser que si vous ciblez un navigateur que vous connaissez supporte, ou si vous compilez votre javascript vers le bas à la syntaxe ES5 en utilisant quelque chose comme babel .

FAUX! Utiliser une fonction de flèche pour définir une méthode qui fait référence à "this"

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    // This is wrong! Arrow functions capture "this" lexically
    // and "this" will refer to the window.
    doSomething: () => this.foo = "baz"
  }
})

DROITE! Définir des méthodes avec la syntaxe de fonction typique

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomething: function(){
      this.foo = "baz"
    }
  }
})

Alternativement, si vous utilisez un compilateur javascript ou un navigateur qui supporte Ecmascript 2015

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomething(){
      this.foo = "baz"
    }
  }
})

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

Vue.js
Utiliser "this" dans Vue

Recherche…