Vue 数值改变页面没有刷新的问题解决(数据改变视图不更新的问题)
作者：月下脆竹書閣
这篇文章主要介绍了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 数值改变页面没有刷新的问题解决(解决数据改变视图不更新的问题)的文章就介绍到这了,更多相关vue数据改变视图不更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！