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))

vue 数组中嵌套数组_Vue 嵌套数组数组更新视图不更新相关推荐

vba 跳到下一个循环_VBA野知识分享：从一个数组中取部分值生成新数组，不使用循环的思路...
从一个数组中取部分值生成新数组,要实现此需求通常都是采用循环的方法来完成,那有没有更简易的思路呢? 借用jscript可以实现,直接取值,不用循环.例如从100000万中元素是取8000个值出来生成新 ...
C语言向有序数组中插入一个数使该数组仍保持有序
C语言向有序数组中插入一个数使该数组仍保持有序 #include<stdio.h> int main() { int n,i,j,t,k; printf("您喜欢 ...
取原始数组中的指定数据push新数组
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>取原始 ...
asp数组中REDIM的用法（动态数组）
asp数组中REDIM的用法(动态数组) 动态数组里面的一个语句,只能出现在过程里面,可以多次使用.可以改变数组大小,和维数格式: REDIM [Preserve] 数组名(下标1[下标2....] ...
数组中哪些常用方法会修改原数组
一.不会改变原来数组的有: concat() concat() 方法用于连接两个或多个字符串. 该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串. every() every() 方法 ...
【JS实战】移除数组中的元素(返回新的数组)
移除数组中的元素(返回新的数组) 方法一:for循环+push function remove(arr, item) {let newArr = [];for(let i = 0; i < ar ...
js移除数组中的元素（返回新数组）
移除数组中的元素(返回新数组) 移除数组 arr 中的所有值与 item 相等的元素.不要直接修改数组 arr,结果返回新的数组. 输入:[1,2,3,4,2] ,2 输出:[1,3,4] 第一种解决 ...
利用for循环把遍历数组中的元素依次获取出来数组笔记及基本知识点
利用for循环把遍历数组中的元素依次获取出来数组索引号从0开始所以i必须从0开始 i<6 <script>var arr = ['blue', 2, true, 4, 5, 6 ...
c++[2035]将a数组中第一个元素移到数组末尾,其余数据依次往前平移一个位置。
[题目描述] 将a数组中第一个元素移到数组末尾,其余数据依次往前平移一个位置. [输入] 第一行为数组a的元素个数: 第二行为n个小于1000的正整数. [输出] 平移后的数组元素,每个数用一个空格隔 ...
删除数组中某个指定元素或删除数组中某个对象元素
ES6--删除数组中某个指定元素或删除数组中某个对象 1.删除数组中某个指定元素 2.删除数组中的某个对象 1.删除数组中某个指定元素 let index = this.array.indexOf(n ...

vue 数组中嵌套数组_Vue 嵌套数组数组更新视图不更新

vue 数组中嵌套数组_Vue 嵌套数组数组更新视图不更新相关推荐

最新文章

热门文章

vue 数组中嵌套数组_Vue 嵌套数组 数组更新视图不更新

vue 数组中嵌套数组_Vue 嵌套数组 数组更新视图不更新相关推荐

最新文章

热门文章

vue 数组中嵌套数组_Vue 嵌套数组数组更新视图不更新

vue 数组中嵌套数组_Vue 嵌套数组数组更新视图不更新相关推荐