vue在html文件中结合axios时,axios的this指向为undefined解决
当vue与axios直接在html文件中使用的时候,位于axios的请求中的this指向并不是指向vue,而是指向window,如果在请求中直接用this获取data中的数据会出现undefined的问题,解决思路是将ES5的函数语法更换为箭头函数即可解决此问题,深层的原因就得深入去了解箭头函数和普通函数之间的区别了!案例:new Vue({el: '#app',data:{carousels:
·
当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)
});
},
})
到此问题就解决了!
如果你也在学习django,那么欢迎私信小编一起交流学习,欢迎star以上项目,给个鼓励,也欢迎您能关注我的公众号“幸福关中”,一起学习交流,上边有很多学习资料哦!
更多推荐
已为社区贡献2条内容
所有评论(0)