Vue 数值改变页面没有刷新（解决数据改变视图不更新的问题）

月下脆竹書閣

已于 2022-05-13 10:13:14 修改

阅读量1w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： javascript 前端

于 2022-05-12 09:45:59 首次发布

本文链接：https://blog.youkuaiyun.com/c_x_m/article/details/124723639

VUE 专栏收录该内容

56 篇文章

订阅专栏

当Vue表格数据通过解构赋值修改后，页面未刷新显示新值。原因在于解构赋值在多层数据结构下是浅拷贝。解决方案包括直接赋值、使用$set、JSON转换以及利用v-if和$nextTick。对于包含render函数的表格，可通过添加tablekey强制重新渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情况描述

值（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;