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;
  • 8
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue的路由切换页面刷新是由于Vue采用了单页应用(Single Page Application, SPA)的开发模式。单页应用是指只有一个HTML页面的应用,通过动态的改变页面的内容来实现不同的页面展示效果,而不是每次刷新整个页面。 在传统的多页应用中,每次页面切换都会发起一个新的http请求,然后服务器返回一个完整的HTML页面页面刷新就是浏览器通过加载新的HTML页面来实现的。 而在Vue的单页应用中,浏览器在加载页面时会先加载一个index.html文件,然后通过使用Vue的路由机制,在不刷新页面的情况下改变URL路径,并借助Vue的内部机制来动态更新页面内容。这意味着整个页面只有一个HTML文件,所有的数据交互和页面变化都通过JavaScript来完成。 因此,当Vue的路由切换时,页面刷新的原因是因为只是改变了URL路径,并没有重新加载整个页面Vue使用了虚拟DOM(Virtual DOM)的概念,在切换路由时,通过监测数据改变,重新构建虚拟DOM,并与原始的虚拟DOM进行插入、删除、更新等操作,从而只更新需要变化的部分,提高了页面的性能和体验。 这样的设计模式可以带来许多好处,如减少网络请求、提高页面加载速度、提升用户体验等。但也需要注意,在一些特殊情况下,比如页面切换后需要重新加载数据,我们需要手动控制页面刷新
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值