当vue与axios直接在html文件中使用的时候,位于axios的请求中的this指向并不是指向vue,而是指向window,如果在请求中直接用this获取data中的数据会出现undefined的当vue与axios直接在html文件中使用的时候,位于axios的请求中的this指向并不是指向vue,而是指向window , 如果在请求中直接用this获取data中的数据会出现undefined的问题,解决思路是将ES5的函数语法更换为箭头函数即可解决此问题,深层的原因就得深入去了解箭头函数和普通函数之间的区别了!
文章插图
文章插图
【undefined解决办法 undefined怎么解除】案例:
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)});}, })
到此问题就解决了!