vue 数组中嵌套数组_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)returnitems

}if(item.children) {

item.children= (this.removeData(item.children, id))//使用splice方法去更新改变后的子数组，

items.splice(index, 1, item)

}

})

console.log(2, this.poi++, items)returnitems

}

如果有子数组则递归调用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))