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' 绑定数据，通过组件中的方法实现了新增和删除操作。