element中table数据不更新

本文探讨了Vue中遇到的两类更新视图的bug。第一类涉及在数据已定义但视图未更新的问题,推荐使用`this.tabledata.splice(index, 0)`或`this.$set(this.tabledata, index, row)`方法。第二类bug是尝试修改未声明的属性导致视图不更新,解决方案是确保先声明属性再赋值。例如,应先处理数据,然后赋值给`this.tabledata`。
摘要由CSDN通过智能技术生成

解决方法:分两类bug

第一类bug: 在data中已经定义,但视图不更新

this.tabledata.splice(index, 0)
this.$set(this.tabledata, index,  row)

这两种方法都是官网所提到推荐的

第二类bug: 就是在上面的方法都试验过了之后也解决不了

比如这种写法

this.tabledata=res.data

this.tabledata.forEach((item)=>{

   item['new_name']=true

})

然后你再在行编辑事件中去修改

rowClick(row){

  row['nw_name']=false

}

你会发现无论使用官方推荐的任何视图更新的方法都不会成功

那是因为这个属性在赋值的时候并未被声明,因此就不能被vue转换为响应式属性

最简单的修改方法就是,先把数据处理了之后,在执行

this.tabledata='被处理的数据'

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值