Vue 使用axios无法使用data属性接收数据
错误例子:data() {return {title: '生命周期',cera: '',money: 1 * 5 * 6 * 4,//listuser用于接收axios返回的数据listuser:'',}methods: {selectUser() {this.$axios.get('/api/ListUs...
·
错误例子:
data() {
return {
title: '生命周期',
cera: '',
money: 1 * 5 * 6 * 4,
//listuser用于接收axios返回的数据
listuser:'',
}
methods: {
selectUser() {
this.$axios.get('/api/ListUser')
.then(function(response) {
console.log("log=", response);
this.listuser=response.data
})
.catch(function(error) {
});
}
}
当你这样在axios中使用this.listuser的时候,会提示没有定义listuser
原因:
在像data
和的选项函数中methods
,vue绑定this
到我们的视图模型实例,所以我们可以使用this.contas
,但在函数里面then
,this
没有绑定。
解决方法1:
methods: {
var slef=this
selectUser() {
this.$axios.get('/api/ListUser')
.then(function(response) {
console.log("log=", response);
slef.listuser=response.data
})
.catch(function(error) {
});
}
}
在axios中 then里边是this不出来data属性的,所以你需要在外边定义一个this,这个时候再用你自己定义的this就可以了
解决方法2:
methods: {
selectUser() {
this.$axios.get('/api/ListUser')
.then((response)=> {
console.log("log=", response);
this.listuser=response.data
})
.catch(function(error) {
});
}
}
如果你的目标是支持现代浏览器(或使用像babel这样的转换器),您可以使用ES6标准中的箭头功能 这样也是可以获取到data属性的
更多推荐
已为社区贡献5条内容
所有评论(0)