Vue里嵌套数组数据怎样竖向显示

在Vue开发中，经常会遇到需要处理嵌套数组数据并将其竖向显示的情况。这在展示具有层级关系的数据，如多级菜单、树形结构等场景中尤为常见。下面将介绍几种实现Vue里嵌套数组数据竖向显示的方法。

方法一：使用v-for嵌套循环

Vue的v-for指令可以方便地遍历数组数据。对于嵌套数组，我们可以通过嵌套v-for循环来实现竖向显示。例如，假设有一个包含多个对象的数组，每个对象又包含一个子数组：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <p>{{ item.name }}</p>
      <ul>
        <li v-for="subItem in item.subItems" :key="subItem.id">{{ subItem.name }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', subItems: [{ id: 11, name: 'Sub Item 1' }, { id: 12, name: 'Sub Item 2' }] },
        { id: 2, name: 'Item 2', subItems: [{ id: 21, name: 'Sub Item 3' }, { id: 22, name: 'Sub Item 4' }] }
      ]
    };
  }
};
</script>

在上述代码中，外层v-for循环遍历items数组，内层v-for循环遍历每个item的subItems子数组，从而实现竖向显示。

方法二：递归组件

如果嵌套层次较深，使用递归组件是一个更好的选择。递归组件允许组件在其自身内部调用自身，从而可以处理任意深度的嵌套数据。创建一个递归组件：

<template>
  <div>
    <p>{{ item.name }}</p>
    <ul v-if="item.subItems">
      <li v-for="subItem in item.subItems" :key="subItem.id">
        <RecursiveComponent :item="subItem" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'RecursiveComponent',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
};
</script>

然后，在父组件中使用递归组件：

<template>
  <div>
    <RecursiveComponent v-for="item in items" :key="item.id" :item="item" />
  </div>
</template>
<script>
import RecursiveComponent from './RecursiveComponent.vue';
export default {
  components: {
    RecursiveComponent
  },
  data() {
    return {
      items: [
        // 嵌套数组数据
      ]
    };
  }
};
</script>

通过上述方法，我们可以在Vue中有效地实现嵌套数组数据的竖向显示，根据实际需求选择合适的方法来展示数据。