Vue.js => Usando "esto" en Vue

Introducción

Uno de los errores más comunes que encontramos en el código Vue en StackOverflow es el mal uso de this . Los errores más comunes generalmente se dividen en dos áreas, utilizando this en devoluciones de llamadas para promesas u otras funciones asíncronas y utilizando funciones de flecha para definir métodos, propiedades computadas, etc.

¡INCORRECTO! Usando "esto" en una devolución de llamada dentro de un método 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);
    }
  }
})

¡INCORRECTO! Usando "esto" dentro de una promesa.

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

¡CORRECTO! Use un cierre para capturar "esto"

Puede capturar la correcta this usando un cierre .

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

¡CORRECTO! Utilice vinculación.

Puede enlazar la función de devolución de llamada.

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

¡CORRECTO! Usa una función de flecha.

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

¡Precaución! Las funciones de flecha son una sintaxis introducida en Ecmascript 2015. Todavía no es compatible con todos los navegadores modernos, así que solo úselo si está apuntando a un navegador que sabe que lo soporta, o si está compilando su javascript hasta la sintaxis de ES5 usando algo como babel .

¡INCORRECTO! Usando una función de flecha para definir un método que se refiere a "esto"

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

¡CORRECTO! Definir métodos con la sintaxis de función típica.

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

Alternativamente, si está utilizando un compilador de javascript o un navegador que admita 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

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

Vue.js
Usando "esto" en Vue

Buscar..