如何通过Vue动态给data函数中的属性赋值实现长尾词效果？

本文共计490个文字，预计阅读时间需要2分钟。

目录 + Vue动态给data函数中的属性赋值 + Vue给data中的数据赋值报错 + 问题背景 + 分析 + 解决方案 + Vue动态给data函数中的属性赋值

1.首先创建一个监视器，用于监视相关的属性

2.当这个相关属性变化时，动态给data函数中的属性赋值

目录

• 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); }); }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。