Vue 嵌套数组 数组更新视图不更新

关于Vue的响应式原理，可以看官方文档或其他资料，

 

https://www.jianshu.com/p/34de360d6035

 

data里定义了一个数组arr，数组的元素可以是同样格式的数组arrChild（数组嵌套），如果只改变最外层的元素即arr的元素，视图可以更新，如果改变的是arrChild里边的数据（内层元素），视图不会自动更新。

 

比如有这样一个功能：根据id删除删除一条数据，需要循环遍历整个数组及子数组，

 

this.removeData(this.data, id)

removeData (items, id) {
  items.forEach((item, index) => {
    if (item.id === id) {
      items.splice(index, 1)
      console.log('这相等了', item, items)
      return items
    }
    if (item.children) {
      item.children = (this.removeData(item.children, id))
     // 使用splice方法去更新改变后的子数组，
      items.splice(index, 1, item)
    }
  })
  console.log(2, this.poi++, items)
  return items
}    

如果有子数组则递归调用removeData方法， 在修改子数组后，返回该子数组，使用splice方法更新该数组元素。

 

data ：

 data: [{
        id: '1',
        code: '0001',
        name: '测试数据1',
        status: '启用',
        remark: '测试数据测试数据'
      }, {
        id: '2',
        code: '0002',
        name: '测试数据2',
        status: '启用',
        remark: '测试数据测试数据',
        children: [{
          id: '01',
          code: '00001',
          name: '测试数据01',
          status: '启用',
          remark: '测试数据测试数据'
        }, {
          id: '02',
          code: '00002',
          name: '测试数据02',
          status: '启用',
          remark: '测试数据测试数据',
          children: [{
            id: '001',
            code: '000001',
            name: '测试数据001',
            status: '启用',
            remark: '测试数据测试数据'
          }, {
            id: '002',
            code: '000002',
            name: '测试数据002',
            status: '启用',
            remark: '测试数据测试数据'
          }]
        }]
      }, {
        id: '3',
        code: '0003',
        name: '测试数据3',
        status: '启用',
        remark: '测试数据测试数据'
      }, {
        id: '4',
        code: '0004',
        name: '测试数据4',
        status: '启用',
        remark: '测试数据测试数据'
      }]

 

PS：

拷贝对象或者数组时，可以使用扩展运算符 "..."。如果对象或者数组中包含子对象和子数组，使用JSON.parse(JSON.stringify(str)) 。

const obj3 = {...obj}
const itemsCopy = [...items]
const itemsCopySub = JSON.parse(JSON.stringify(items))