Vue踩坑—axios数据赋值错误Uncaught (in promise) TypeError: Cannot set property ‘mes‘ of undefined
最近正在入门vue,有个重要的应用场景:需要将axios请求返回的数据赋值到data中的数据项,data中的数据项会双向绑定到页面中进行渲染。但是在回调函数中进行赋值时出现错误,原代码如下:methods:{tijiao(){this.axios({method:'post',params:{yhm:this.yhm,
·
最近正在入门vue,有个重要的应用场景:需要将axios请求返回的数据赋值到data中的数据项,data中的数据项会双向绑定到页面中进行渲染。
但是在回调函数中进行赋值时出现错误,原代码如下:
methods:{
tijiao(){
this.axios({
method:'post',
params:
{
yhm:this.yhm,
pwd:this.pwd
},
url:'http://localhost:1111/01/zhuce'
}).then(function(resp){
console.log(resp.data);
this.mes=resp.data;
})
}
}
当运行时会发现:数据可以请求到,但是会报错TypeError: Cannot set property ‘listgroup’ of undefined
,也就是说请求到的数据无法绑定到data里的数据项。
错误原因
.then(function(resp){
console.log(resp.data);
this.mes=resp.data; //该处出错
})
then中使用了function callback
,因此在回调函数里面,this是指向HTTP request event,已经不是外部的默认vue对象
了。
解决办法
1、用ES6箭头函数,箭头方法可以和外部的vue对象共享变量
methods:{
tijiao(){
this.axios({
method:'post',
params:
{
yhm:this.yhm,
pwd:this.pwd
},
url:'http://localhost:1111/01/zhuce'
}).then(resp=>{ //改为箭头函数
console.log(resp.data);
this.mes=resp.data;
})
}
}
避免了函数function屏蔽了作用域。
2、使用一个 that 指向外部的this
methods:{
tijiao(){
var that=this; //使用that 指向外部的this(即vue对象)
this.axios({
method:'post',
params:
{
yhm:this.yhm,
pwd:this.pwd
},
url:'http://localhost:1111/01/zhuce'
}).then(function(resp){
console.log(resp.data);
this.mes=resp.data;
})
}
}
更多推荐
已为社区贡献12条内容
所有评论(0)