最近在用Vue框架做网站建设时遇到了值(List)修改后,打印值改变了,但页面数据没刷新的情况:
如何赋值: this.tableData[index] = { ...this.tableData[index], ...result }
想法:利用解构赋值,修改对应key的value值
例:this.tableData[index] = {id:1,name:jarry} result={id:2}
通过在网上找到相关资料和文档,最终解决了这个问题,现把解决过程分享出来供大家参考。
一、原因分析:
解构赋值如果所解构的原对象是一维数组或对象,其本质就是对基本数据类型进行等号赋值,那它就是深拷贝;如果是多维数组或对象,其本质就是对引用类型数据进项等号赋值,那它就是浅拷贝;最终的结论就是:解构赋值是浅拷贝(因为它确实不能对多维数组或对象达到深拷贝的作用);
二、解决办法:
知道了出现不刷新的问题原因,那么我们就来做相应的解决方法:
1、直接赋值
Object.keys(result).forEach(item => { this.tableData[index][item] = result[item]; })
2、$set
Object.keys(result).forEach(item => { this.$set(this.tableData[index], item, result[item]) })
3、重新赋值 JSON.parse(JSON.stringify(this.tableData))
this.tableData[index] = { ...this.tableData[index], ...result }; this.tableData = JSON.parse(JSON.stringify(this.tableData))
4、v-if&&this.$nextTick 重新渲染页面
<Table :columns="columns" :data="tableData" v-if="isTable"></Table> this.$nextTick(()=>{ this.isTable = true; })
当表格数据改变,表格没刷新时,并且使用了render
例如:如下是增加了表格可展开行,但是 展开行在重新赋值时并没有更新页面
columns: [ { type: "expand", width: 30, align: "center", render: (h, params) => { return h( "div", { style: { padding: "5px 0 5px 30px", backgroundColor: "#fff", }, }, [ h("Table", { props: { border: true, columns: this.columns1, data: this.data[params.index].children || [], tablekey: this.tablekey, }, }), ] ); }, } ]
继续解决:
添加 tablekey ,当赋值以后, this.tablekey++
this.data.forEach((item) => { if (item.id === id) { let result = res.result || []; item.children = result; this.submitBindData.ids = result.map((o) => o.id).join(","); } }); ++this.tablekey;
好了,Vue 数据改变视图不更新的问题就顺利解决了,看完后喜欢的话记得收藏哦。