背景:
点击编辑按钮,打开修改预算的抽屉,保存后更新此行数据的预算,以前是调接口刷新表格,这次的数据是由前端处理更新,由于数据层级比较深,使用$set
来修改两层嵌套对象
使用方法:
this.$set( target, key, value )
- target:要更改的数据源(可以是对象或者数组)
- key:要更改的具体数据
- value :重新赋的值
方法1
我刚试了一下,发现这样链式到要修改的对象也能生效
因为这个页面我有不同的抽屉,currentName代表我修改的那个表格,currentIndex代表要修改那一行。所以【target】其实为 this.tableData[2].crowd,【key】是预算值budget,【value 】是修改值。可以根据自己的结构来处理
this.$set(this[this.currentName][this.currentIndex].crowd, 'budget', value)
方法2
先把当前那一行的预算值修改了,再修改整个表格中当前索引的值,注意,这里必须要把扩展当前行的其他值,不然整个行只有crowd这个对象了。
this.$set(this.currentRow, 'budget', value)
this.$set(this[this.currentName],this.currentIndex,{
...this[this.currentName][this.currentIndex],
crowd: this.currentRow
})