前言
昨天在写axios取出后台数据时,不能给组件定义的data中的数据传值,开始的时候以为是不是生命周期钩子用错了,后来发现没错,又以为是不是promise异步的问题,发现也不是,最后查询资料发现是一个很小的写法问题,现在分享一下,供大家参考:
1.相关值与代码
template:{{chose}}
data:function(){
return{ chose:'这是测试1'}
}
钩子:
beforeMount:(to, from, next)=>{
axios({
method: 'post',
url: '/users'
}).then(function(res){
if(res.data){
var data=res.data;
this.chose=data.chose;//此处应返回:这是测试2
}else{
alert('查询失败')
}
}).catch(function (error) {
console.log(error);
})
}
2.分析及解决
这段代码实现的效果就是在未挂载前发一个ajax,回应的数据是:‘这是测试2’
data与template中都没用问题,但是页面上并没有显示我想要的数据,问题出现在beforeMount中,
错误1:定义钩子函数时用了箭头函数
此时会报错
(to, from, next)=>{}
应为:function(to, from, next){}
的定义方式
错误2:.then()的回调函数
应写成箭头函数
.then(res=>{
......
})