vue 多层json数据的增删改查

Vue 处理多层 JSON 数据的增删改查主要有以下几种方法：

使用 v-for 指令循环遍历数据，使用 v-model 绑定数据，在组件中进行增删改查操作。
使用深度监听属性 $watch 监听数据的变化，在回调函数中进行增删改查操作。
使用 computed 计算属性，根据数据的不同层级返回不同的数据，然后在组件中进行增删改查操作。
使用 Vuex 管理数据，在组件中调用 action 进行增删改查操作。

下面是一个使用 v-for 指令和 v-model 绑定数据的例子：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in data" :key="index">
        {{ item.name }}
        <input v-model="item.value">
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
    <button @click="addItem">新增</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: '项目1',
          value: '数值1',
          children: [
            {
              name: '子项目1',
              value: '子数值1',
            },
            {
              name: '子项目2',
              value: '子数值2',
            },
          ],
        },
        {
          name: '项目2',
          value: '数值2',
          children: [
            {
              name: '子项目3',
              value: '子数值3',
            },
            {
              name: '子项目4',
              value: '子数值4',
            },
          ],
        },
      ],
    };
  },
  methods: {
    addItem() {
      this.data.push({
        name: '新项目',
        value: '',
        children: [],
      });
    },
    deleteItem(index) {
      this.data.splice(index, 1);
    },
  },
};
</script>

在这个例子中，我们使用 v-for 指令遍历多层数据，并使用 v-model 绑定数据，通过组件中的方法实现了新增和删除操作。