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

假设我有一个结构如下的数组

[
    { 
        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>

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

<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>

全球的
非洲
布隆迪
..

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

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

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

<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>

region.name

然后混淆如何显示子区域。重要的是用户可以选择所有区域/子区域/国家。整天呆在家里。拜托，也许有人能帮我

---

提前感谢

您可以使用模板在每个区域迭代，并在模板内通过每个子区域迭代：

  <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>

{{region.name}
{{subsection.name}
{{country.name}

---

事实上，我只是知道怎么做，我正在互联网上再次探索，并最终找到了答案。它使用

标签，如下所示

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

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

<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>

{{region.name}
{{subsection.name}}
{{country.name}

一个小提示：您可以跳过最后一个模板，直接迭代选项