当前位置：首页 > VUE

vue实现嵌套数组

2026-01-20 02:46:40VUE

Vue 中实现嵌套数组的常见方法

在 Vue 中处理嵌套数组时，通常会结合 v-for 指令和响应式数据管理。以下是几种典型场景的实现方式：

基本嵌套渲染

使用多层 v-for 渲染嵌套数组结构：

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

<script>
export default {
  data() {
    return {
      nestedArray: [
        { 
          id: 1,
          children: [
            { value: 'A' },
            { value: 'B' }
          ]
        }
      ]
    }
  }
}
</script>

动态添加嵌套元素

通过方法操作嵌套数组：

vue实现嵌套数组

methods: {
  addChild(parentIndex) {
    this.nestedArray[parentIndex].children.push({
      value: 'New Item'
    });
  }
}

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

对嵌套数组进行过滤或转换：

computed: {
  filteredNestedArray() {
    return this.nestedArray.map(item => ({
      ...item,
      children: item.children.filter(child => child.value.includes('A'))
    }));
  }
}

深度响应式注意事项

当直接修改嵌套数组内部元素时，可能需要使用 Vue.set 或展开运算符确保响应式：

vue实现嵌套数组

updateChild(parentIndex, childIndex) {
  this.$set(
    this.nestedArray[parentIndex].children,
    childIndex,
    { value: 'Updated' }
  );
}

使用递归组件

对于深度不确定的嵌套结构，可创建递归组件：

<template>
  <nested-item :item="nestedArray"></nested-item>
</template>

<!-- NestedItem.vue -->
<template>
  <div>
    {{ item.value }}
    <nested-item 
      v-for="child in item.children"
      :item="child"
      :key="child.id"
    ></nested-item>
  </div>
</template>

与 Vuex 配合管理状态

在大型应用中通过 Vuex 管理嵌套数组：

// store.js
state: {
  nestedData: []
},
mutations: {
  UPDATE_NESTED_ITEM(state, payload) {
    state.nestedData[payload.parentIdx].children[payload.childIdx] = payload.value;
  }
}