Vue.js => Usando "questo" in Vue

introduzione

Uno degli errori più comuni che troviamo nel codice Vue su StackOverflow è l'uso improprio di this . Gli errori più comuni ricadono generalmente in due aree, utilizzando this in callback per promesse o altre funzioni asincrone e utilizzando le funzioni freccia per definire metodi, proprietà calcolate, ecc.

SBAGLIATO! Usando "questo" in un callback all'interno di un metodo 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);
    }
  }
})

SBAGLIATO! Usare "questo" all'interno di una promessa.

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;
    })
  }
})

DESTRA! Usa una chiusura per catturare "questo"

Puoi catturare this corretto usando una chiusura .

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;
    })
  }
})

DESTRA! Usa il bind.

È possibile associare la funzione di callback.

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));
  }
})

DESTRA! Usa una funzione freccia.

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

Attenzione! Le funzioni freccia sono una sintassi introdotta in Ecmascript 2015. Non è ancora supportata ma tutti i browser moderni, quindi usala solo se stai mirando a un browser che conosci , oppure se stai compilando il tuo javascript con la sintassi ES5 usando qualcosa come babel .

SBAGLIATO! Utilizzando una funzione freccia per definire un metodo che si riferisce a "questo"

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"
  }
})

DESTRA! Definire metodi con la sintassi della funzione tipica

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

In alternativa, se stai usando un compilatore javascript o un browser che supporta 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

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

Vue.js
Usando "questo" in Vue

Ricerca…