vue js中this引用有時失敗的原因
<script>
new Vue({
el:"#app",
data() {
return {
arr:[],
ShowArr:false,
}
},
created:function () {
this.getData();
},
methods:{
getData(){
axios.get("/data").then(function(res){
this.arr = res.data;
});
},
}
});
</script>
在這段程式碼中this引用實際上是指向的並非是Vue物件,而是傳送請求的axios物件,也就是在這段程式碼執行之後,不能實現arr資料的重新整理,要解決問題首先的在axios外部儲存Vue的this引用,即:
methods:{
getData(){
var self = this;
axios.get("/data").then(function(res){
self.arr = res.data;
});
},
}