Vue 嵌套数组 数组更新视图不更新 |
您所在的位置：网站首页 › 数据嵌套太深,vue不响应 › 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) 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))
|
【本文地址】
今日新闻 |
推荐新闻 |