1. 程式人生 > 其它 >vue js中this引用有時失敗的原因

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