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