Vue.js => Gebruik "this" in Vue

Invoering

Een van de meest voorkomende fouten die we vinden in Vue-code op StackOverflow is het misbruik this . De meest voorkomende fouten vallen over het algemeen in twee gebieden, this in callbacks voor beloften of andere asynchrone functies en het gebruik van pijlfuncties om methoden, berekende eigenschappen, enz. Te definiëren.

MIS! "Dit" gebruiken in een callback in een Vue-methode.

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

MIS! "Dit" gebruiken binnen een belofte.

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

RECHTSAF! Gebruik een sluiting om "dit" vast te leggen

U kunt de juiste vangen this met behulp van een sluiting .

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

RECHTSAF! Gebruik binden.

U kunt de terugbelfunctie binden .

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

RECHTSAF! Gebruik een pijlfunctie.

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

Voorzichtigheid! Pijlfuncties zijn een syntaxis geïntroduceerd in Ecmascript 2015. Het wordt nog niet ondersteund, maar alle moderne browsers, dus gebruik het alleen als u zich richt op een browser waarvan u weet dat het wordt ondersteund, of als u uw javascript naar ES5-syntaxis compileert met zoiets als babel .

MIS! Een pijlfunctie gebruiken om een methode te definiëren die verwijst naar "dit"

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

RECHTSAF! Definieer methoden met de typische functiesyntaxis

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

U kunt ook een JavaScript-compiler of een browser gebruiken die Ecmascript 2015 ondersteunt

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

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

Vue.js
Gebruik "this" in Vue

Zoeken…