Vue.js => Verwenden Sie "this" in Vue

Einführung

Einer der häufigsten Fehler , die wir in Vue Code auf Stackoverflow zu finden , ist der Missbrauch this . Die häufigsten Fehler betreffen im Allgemeinen zwei Bereiche: Sie verwenden this in Rückrufen für Versprechen oder andere asynchrone Funktionen und verwenden Pfeilfunktionen, um Methoden, berechnete Eigenschaften usw. zu definieren.

FALSCH! Verwenden Sie "this" in einem Rückruf in einer 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);
    }
  }
})

FALSCH! Verwenden Sie "dies" in einem Versprechen.

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

RECHT! Verwenden Sie einen Verschluss, um "dies" zu erfassen

Sie können die korrekte Erfassung this unter Verwendung eines Verschlusses .

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

RECHT! Verwenden Sie bind.

Sie können die Rückruffunktion 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));
  }
})

RECHT! Verwenden Sie eine Pfeilfunktion.

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

Vorsicht! Pfeil - Funktionen sind eine Syntax eingeführt in EcmaScript 2015. Es wird noch nicht unterstützt , aber alle modernen Browser, so dass es nur verwenden , wenn Sie Targeting ein Browser , den Sie wissen , unterstützt, oder wenn Sie Ihren Javascript kompilieren bis ES5 Syntax mit so etwas wie babel .

FALSCH! Verwenden einer Pfeilfunktion zum Definieren einer Methode, die auf "this" verweist

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

RECHT! Definieren Sie Methoden mit der typischen Funktionssyntax

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

Alternativ, wenn Sie einen Javascript-Compiler oder einen Browser verwenden, der Ecmascript 2015 unterstützt

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

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

Vue.js
Verwenden Sie "this" in Vue

Suche…