当vue与axios直接在html文件中使用的时候，位于axios的请求中的this指向并不是指向vue,而是指向window，如果在请求中直接用this获取data中的数据会出现undefined的
当vue与axios直接在html文件中使用的时候，位于axios的请求中的this指向并不是指向vue,而是指向window，如果在请求中直接用this获取data中的数据会出现undefined的问题，解决思路是将ES5的函数语法更换为箭头函数即可解决此问题，深层的原因就得深入去了解箭头函数和普通函数之间的区别了！
案例：
new Vue({el: \'#app\',data:{carousels: [], }, created() { axios.get(\'/api/banners/\').then(function (response) { // 这里的this.carousels是undefined，因此上下边的赋值是不起作用的 this.carousels = res.data }).catch(function (error) { console.log(err) }); }, })以上案例可以发现在axios中使用this获取data中的值是获取不到的，这就是this的指向问题造成的，他不是指向vue，只需要修改如下，将function函数改为箭头函数即可解决！
修改代码如下：
new Vue({el: \'#app\',data:{carousels: [], }, created() { axios.get(\'/api/banners/\').then(res => { this.carousels = res.data }).catch(err => { console.log(err) }); }, })到此问题就解决了！
本站部分文章来自网络或用户投稿，如无特殊说明或标注，均为本站原创发布。涉及资源下载的，本站旨在共享仅供大家学习与参考，如您想商用请获取官网版权，如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。