vue实现嵌套数组

Vue 实现嵌套数组的方法

在 Vue 中处理嵌套数组时，通常需要使用 v-for 指令进行渲染，并结合响应式方法更新数据。以下是几种常见的实现方式：

使用 v-for 渲染嵌套数组

<template>
  <div>
    <div v-for="(item, index) in nestedArray" :key="index">
      {{ item.name }}
      <div v-for="(subItem, subIndex) in item.children" :key="subIndex">
        {{ subItem.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nestedArray: [
        {
          name: 'Parent 1',
          children: [
            { name: 'Child 1' },
            { name: 'Child 2' }
          ]
        },
        {
          name: 'Parent 2',
          children: [
            { name: 'Child 3' }
          ]
        }
      ]
    }
  }
}
</script>

动态添加嵌套数组元素

methods: {
  addParent() {
    this.nestedArray.push({
      name: 'New Parent',
      children: []
    })
  },
  addChild(parentIndex) {
    this.nestedArray[parentIndex].children.push({
      name: 'New Child'
    })
  }
}

使用 Vue.set 或 this.$set 确保响应式更新

当需要动态添加深层嵌套属性时，应使用 Vue 的响应式方法：

methods: {
  addNestedProperty(parentIndex, childIndex) {
    this.$set(this.nestedArray[parentIndex].children[childIndex], 'newProperty', 'value')
  }
}

使用计算属性处理嵌套数组

computed: {
  flattenedArray() {
    return this.nestedArray.flatMap(parent => [
      parent,
      ...parent.children
    ])
  }
}

使用 watch 监听嵌套数组变化

watch: {
  nestedArray: {
    handler(newVal) {
      console.log('Nested array changed', newVal)
    },
    deep: true
  }
}

注意事项

1. 为 v-for 提供唯一的 key 属性，提高渲染性能
2. 修改嵌套数据时使用响应式方法，确保视图更新
3. 对于复杂嵌套操作，考虑使用 Vuex 进行状态管理
4. 深度监听嵌套数组时设置 deep: true 选项

这些方法可以灵活组合使用，根据具体需求选择最适合的实现方式。