vue实现动态给data函数中的属性赋值
更新时间：2022年09月07日 12:00:13 作者：夜观山海
这篇文章主要介绍了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);
});
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化过程
在进行非完全标准化数据的可视化展示时,瀑布流是一种经常被采用的展示方法,瀑布流能够有效地将不同大小规格的内容以一种相对规整的方式呈现出来,本文给大家介绍了基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块,需要的朋友可以参考下2025-03-03
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了在vue中实现禁止屏幕滚动,禁止屏幕滑动，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue实现登录类型切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现
本文主要介绍了Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
element-ui中el-row中设置:gutter间隔不生效问题
这篇文章主要介绍了element-ui中el-row中设置:gutter间隔不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
安装@vue/cli报错npmERR gyp ERR问题及解决
这篇文章主要介绍了安装@vue/cli报错npmERR gyp ERR问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了关于vue双向绑定带来的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
大家都知道在Vue里面有两种出名的插件能够支持发起异步数据传输和接口交互,分别是axios和vue-resource,同时vue更新到2.0之后,宣告不再对vue-resource更新,而是推荐的axios,今天就讲一下怎么引入axios,需要的朋友可以参考下2024-01-01
最新评论