【vue】vue给data定义的变量赋值时候报错Cannot set property ‘tableData‘ of undefined解决方案
前言vue中通过axios调用webapi获取数据后,把数据绑定到element table时候,报错:
·
前言
vue中通过axios调用webapi获取数据后,把数据绑定到element table时候,报错:Cannot set property 'tableData' of undefined,解决方案如下
报错信息
此处代码报错:this.tableData = res.data;
报错原因:是因为在函数(function)中如果使用this,那么此this指向函数本身,所以在外部定义的变量(tableData )是无法获取到的
<script>
const restweburl = "http://localhost:5000/";
export default {
created() {
this.axios
.get(restweburl + "api/Article/GetAllArticles", {
// 如果需要传参可以通过如下方式,也可以直接把参数拼接在url后边
//params: {
//title: "",
//},
})
.then(function (res) {
//此处代码报错
this.tableData = res.data;
})
.catch(function (error) {
console.log(error);
});
},
data() {
return {
tableData: [],
};
},
};
</script>
解决方案
第一种方案:定义一个that指向外部的this,然后使用that. tableData
const that=this; //用that解决函数内部this指向问题
that.tableData = res.data;
修改后的代码
const that=this; //用that解决函数内部this指向问题
this.axios
.get(restweburl + "api/Article/GetAllArticles", {
// 如果需要传参可以通过如下方式,也可以直接把参数拼接在url后边
//params: {
//title: "",
//},
})
.then(function (res) {
that.tableData = res.data;
})
.catch(function (error) {
console.log(error);
});
第二种方案:把函数function改为箭头函数=>
.then(res=> {
this.tableData = res.data;
})
修改后的代码如下
this.axios
.get(restweburl + "api/Article/GetAllArticles", {
// 如果需要传参可以通过如下方式,也可以直接把参数拼接在url后边
//params: {
//title: "",
//},
})
.then(res=> {
this.tableData = res.data;
})
.catch(function (error) {
console.log(error);
});
修改后运行项目可以正常获取和绑定数据,完美解决
更多推荐
已为社区贡献7条内容
所有评论(0)