Vue.js => Med "detta" i Vue

Introduktion

Ett av de vanligaste felen som vi hittar i Vue-kod på StackOverflow är missbruk av this . De vanligaste misstagen faller vanligtvis på två områden, och använder this i återuppringningar för löften eller andra asynkrona funktioner och använder pilfunktioner för att definiera metoder, beräknade egenskaper etc.

FEL! Använda "detta" i ett återuppringning i en Vue-metod.

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

FEL! Att använda "detta" inuti ett löfte.

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

RÄTT! Använd en stängning för att fånga "detta"

Du kan fånga den rätta this med hjälp av en förslutning .

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

RÄTT! Använd bind.

Du kan binda återuppringningsfunktionen.

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

RÄTT! Använd en pilfunktion.

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

Varning! Pilfunktioner är en syntax som introducerades i Ecmascript 2015. Det stöds inte ännu men alla moderna webbläsare, så använd det bara om du målriktar en webbläsare som du vet stöder det, eller om du kompilerar ditt javascript ned till ES5-syntax med något liknande babel .

FEL! Använda en pilfunktion för att definiera en metod som hänvisar till "detta"

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

RÄTT! Definiera metoder med den typiska funktionssyntaxen

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

Alternativt, om du använder en javascript-kompilator eller en webbläsare som stöder 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

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

Vue.js
Med "detta" i Vue

Sök…