vue2数组对象修改赋值bug

因为业务需求需要对从另一个组件获取到的数据先做处理后添加在el-table的list里面。

arr是一个数组
arr.forEach((item) => {
  item.stockId = item.id
  item.lossRate = 0
  item.quantity = 0
  item.materialId = null
  item.materialVersion = item.defaultBomVersion ? item.defaultBomVersion : null
  delete item.id
})
this.list = this.list.concat(arr)

但是这样子处理的话会导致行内编辑无法正常双向绑定（下图怎么输入都无法改变）

查找原因 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
通俗点意思是我这arr是已经在另一个组件中创建的实例。是不能直接修改内部的对象
参考博客：https://www.cnblogs.com/yanqiong/p/11174472.html
因为直接修改内部对象是无get set方法，导致双向绑定失效

解决办法（使用vue.set()和vue.delete()对对象做处理）
https://cn.vuejs.org/v2/api/#Vue-delete

arr.forEach((item) => {
  this.$set(item, 'stockId', item.id)
  this.$set(item, 'lossRate', 0)
  this.$set(item, 'quantity', 0)
  this.$set(item, 'materialId', null)
  this.$set(item, 'materialVersion', item.defaultBomVersion ? item.defaultBomVersion : null)
  this.$delete(item, 'id')
})
this.list = this.list.concat(arr)