在自己的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;
                    });
            }
        }

 到这里这篇文章就结束了 ，感谢大家的阅读，我也是一个菜鸟，咱们相互学习，这篇文章希望对你们有所帮助

版权声明：本文为dudu-zhuzhu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dudu-zhuzhu/p/8298638.html