Vue.js => Vueで "this"を使う

前書き

StackOverflowのVueコードで見つかった最も一般的なエラーの1つは、 this誤って使用するthisです。最も一般的な間違いを使用して、二つの領域では、一般的に落ちるthis等の約束またはその他の非同期関数やメソッドを定義するには、矢印の機能を使用して、計算された性質のためのコールバックに

違う！ Vueメソッド内のコールバックで "this"を使用する。

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

違う！約束の中で "this"を使う。

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

右！クロージャを使用して "this"をキャプチャします。

クロージャを使用してthisを修正することができます。

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

右！バインドを使用します。

コールバック関数をバインドできます。

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

右！矢印機能を使用します。

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

あぶない！アロー機能は、あなたが知っているブラウザがそれをサポートしている標的にしている場合ので、それだけを使用し、ECMAScriptの2015それはまだサポートされていませんが、 すべての最新ブラウザで導入された構文いる、またはあなたがES5構文にダウンあなたのJavaScriptをコンパイルする場合のようなもの使っバベルを。

違う！矢印関数を使用して "this"を参照するメソッドを定義する

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

右！典型的な関数構文でメソッドを定義する

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

また、JavaScriptのコンパイラまたは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

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

Vue.js
Vueで "this"を使う

サーチ…

前書き