在自己的vue小项目中使用了axios这个插件，但是发现在axios请求数据成功之后的回调函数中this并不是指向当前vue实例，
在如下代码中 谷歌浏览器中报 this.goodsArr 未被定义
data(){
return{
goodsArr : []
}
},
mounted : function(){
this.getGoodsList();
},
methods:{
getGoodsList(){
axios.get('/api/goods').then(
function(result){
var res = result.data;
this.goodsArr = res.data;
});
}
}
出错原因：
为啥在then中使用this.goodsArr = res.data这种赋值方法会报错呢？这个时候度娘的作用发挥出来了，通过度娘知道了 原来在then中的this不是当前vue实例中的this，具体可以戳这里 问题原因 。在这里非常感谢该作者。
解决办法：
1、我们可以再axios外边使用变量储存一下当前vue实例中的this
data(){
return{
goodsArr : []
}
},
mounted : function(){
this.getGoodsList();
},
methods:{
getGoodsList(){
var _this = this;
axios.get('/api/goods').then(
function(result){
var res = result.data;
_this.goodsArr = res.data;
});
}
}
2、我们还可以使用ES6中的箭头函数 箭头函数
data(){
return{
goodsArr : []
}
},
mounted : function(){
this.getGoodsList();
},
methods:{
getGoodsList(){
axios.get('/api/goods').then((result)=>{
var res = result.data;
this.goodsArr = res.data;
});
}
}
到这里这篇文章就结束了 ，感谢大家的阅读，我也是一个菜鸟，咱们相互学习，这篇文章希望对你们有所帮助