vue实现动态给data函数中的属性赋值
作者：夜观山海
这篇文章主要介绍了vue实现动态给data函数中的属性赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue动态给data函数中的属性赋值
1.首先创建一个监视器，用来监视相关的属性
2.当这个相关的属性被修改的时候，在监视器中的handler函数中写处理逻辑即可
vue给data中的数据赋值报错
TypeError: Cannot set property ‘tableData‘ of undefined
问题背景
最近刚入门vue，有个典型的场景，也是简单的坑。就是需要通过axios请求数据之后，将数据赋予到data中的tableData，而table组件会根据tableData双向绑定自动渲染。
但是当我赋值的时候TypeError: Cannot set property 'tableData' of undefined。究竟怎么回事呢。
分析
代码看起来，好像并没有什么毛病。。。
export default {
data() {
return {
total: 0, //默认数据总数
searchParam:{
limit: 10, //每页的数据条数
page: 1, //默认开始页面
certNumber: "",
certLevel: "",
certCompanyName: "",
},
tableData: []
};
},
onSearch: function(){
axios.post('/api/certCompany/list2',JSON.stringify(this.searchParam))
.then(function (response) {
console.log(response);
this.tableData=response.data.data;
this.total=response.data.count;
})
.catch(function (error) {
console.log(error);
});
}
};
然而问题是出来了this.tableData因为用了 function 函数 的原因，在函数里面，this是指向函数本身，已经不是外部的默认this了
解决方案
使用一个 that 指向 外部的this ，然后调用 that.tableData ，轻松搞定。
onSearch: function(){
const that=this; //用that解决函数内部this指向问题 zhengkai.blog.csdn.net
axios.post('/api/certCompany/list2',JSON.stringify(this.searchParam))
.then(function (response) {
console.log(response);
that.tableData=response.data.data;
that.total=response.data.count;
})
.catch(function (error) {
console.log(error);
});
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。