vue3 Foeach 修改所有子级分类的值

在 Vue3 中，如果你想要遍历一个数组并修改其中所有子级分类的值，通常你会在 `v-for` 循环里对每个元素及其子元素进行操作。假设你有一个嵌套的对象或数组结构，比如是一个包含类别数据的对象列表：

data() {
  return {
    categories: [
      { id: 1, name: '父分类1', children: [{ id: 11, name: '子分类1-1' }, { id: 12, name: '子分类1-2' }] },
      { id: 2, name: '父分类2', children: [] }
    ]
  };
}

你可以这样处理：

<template>
  <ul>
    <li v-for="category in categories" :key="category.id">
      {{ category.name }}
      <ul>
        <li v-for="subCategory in category.children" :key="subCategory.id">
          <!-- 修改这里 -->
          <span @click.prevent="updateSubCategory(subCategory)">修改子分类</span>
          <span>{{ subCategory.name }}</span> <!-- 这里显示原始值 -->
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
methods: {
  updateSubCategory(subCategory) {
    // 假设你想将子分类的name改为新的值
    subCategory.name = '新名称';
    // 如果需要保存到服务器或组件状态，记得在此处添加对应的操作
  }
}
</script>

在这个例子中，点击“修改子分类”按钮会触发 `updateSubCategory` 方法，它接收当前的子分类作为参数，并更新其 `name` 属性。如果你想批量更新所有子分类，可以在这个方法内部再进行循环。