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); }); }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
利用vue + koa2 + mockjs模拟数据的方法教程
这篇文章主要给大家介绍了关于利用vue + koa2 + mockjs模拟数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2017-11-11启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解
这篇文章主要介绍了启动myvue报错npm ERR! code ENOENT npm ERR! syscall open的解决办法,文中给出了详细的解决方法,并通过图文结合的方式介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论