Question

假设我下面有一个数组

[
    { 
        id: 0, 
        name: 'Global'
    },
    { 
        id: 1,
        name: 'Africa',
        sub_regions: [
            {
                id: 2,
                name: "East Africa",
                countries: [
                    {
                        id: 3,
                        name: "Burundi"
                    },
                    {
                        id: 4,
                        name: "Comoros"
                    }
                ]
            }
        ]
    },
    {
        id: 5,
        name: "Asia",
    }
]

我想做的事情如下

<select>
    <option>Global</option>
    <option>Africa</option>
    <option>Burundi</option>
    ..
</select>

我尝试使用v-for，如下所示

<select>
    <option value="region.id" v-for="region in regions">region.name</option>
</select>

然后混淆如何显示子区域。重要的是用户可以选择所有区域/子区域/国家。整日陷入困境。请有人也许可以帮助我。

预先感谢

Answer 1

您可以使用模板遍历每个区域，并在每个子区域中遍历该模板：

  <select>
    <template v-for="region in regions">
        <option :value="region.id">{{region.name}}</option>
        <template v-for="subregion in region.sub_regions">
          <option :value="subregion.id" v-for="subregion in region.sub_regions">{{subregion.name}}</option>
          <option :value="country.id" v-for="country in subregion.countries">{{country.name}}</option>
        </template>
    </template>
  </select>

https://jsfiddle.net/cckLd9te/2926/

Answer 2

实际上，我只是知道该怎么做，我在互联网上再次探索并找到了答案（最终）。它使用<template>标记，如下所示

<select>
    <template v-for="region in regions">
        <option :value="region.id">{{ region.name }}</option>
        <template v-if="region.sub_regions" v-for="subregion in region.sub_regions">
            <option :value="subregion.id">{{ subregion.name }}</option>
            <template v-if="subregion.countries" v-for="country in subregion.countries">
                <option :value="country.id">{{ country.name }}</option>
            </template>
        </template>
    </template>
</select>

如何在Vue JS中使用v-for将多维数组显示为一级选择选项

2 个答案: