vue遍历多层数组并修改值

在Vue.js中，遍历多层数组并修改其值通常涉及到深度克隆和嵌套循环。这里是一个基本的示例，假设我们有一个嵌套的数组对象，并想要递归地更新某个键的值：

// 假设我们有这样一个数组对象
let data = [
  {
    name: 'Parent 1',
    children: [
      { name: 'Child 1', details: { value: 10 } },
      { name: 'Child 2', details: { value: 20 } }
    ]
  },
  {
    name: 'Parent 2',
    children: [{ name: 'Grandchild', details: { value: 30 } }]
  }
];

// 定义一个函数用于递归更新
function updateValue(obj, keyPath, newValue) {
  if (!obj || !keyPath) return;
  let keys = keyPath.split('.');
  
  for (let i = 0; i < keys.length; i++) {
    obj = obj[keys[i]];
    if (i === keys.length - 1) {
      // 找到目标路径，更新值
      obj.value = newValue;
    }
  }
}

// 遍历并更新所有层级
data.forEach(item => {
  updateValue(item, 'children.*.details.value', 50); // 更新所有子节点详情值为50
});

// Vue实例中使用，假设data是一个响应式的数据源
this.data = data;

在这个例子中，`updateValue`函数接收当前对象、需要访问的路径（如`children.*.details.value`表示任意层级的孩子对象的`details.value`）以及新的值。`forEach`用于迭代数据数组。