javascript - Vue.js - 嵌套的 v-for 循环

Question

我有一个 Vue 3.0 应用程序。在这个应用程序中，我有以下内容：

export default {
  data() {
    return {
      selected: null,
      departments: [
        { 
          name: 'Sports', 
          items: [
            { id:'1', label: 'Football', value:'football' },
            { id:'2', label: 'Basketball', value:'basketball' },
          ]
        },

        {
          name: 'Automotive',
          versions: [
            { id:'3', label: 'Oil', value:'oil' },
            { id:'4', label: 'Mud Flaps', value:'mud-flaps' },
          ]
        }
      ]
    };
  }
};

我需要在下拉列表中呈现这些项目。值得注意的是，这些项目需要按部分呈现。为了做到这一点，我正在使用Bootstrap 的下拉标题。我的挑战是，HTML 需要以我看不到如何使用 Vue 的方式呈现。我需要像这样呈现我的 HTML：

<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <li><h6 class="dropdown-header">Sports</h6></li>
  <li><a class="dropdown-item" href="#">Football</a></li>
  <li><a class="dropdown-item" href="#">Basketball</a></li>
  <li><h6 class="dropdown-header">Automotive</h6></li>
  <li><a class="dropdown-item" href="#">Oil</a></li>
  <li><a class="dropdown-item" href="#">Mud Flaps</a></li>
</ul>

基于这种需要，我必须有一个嵌套的 for 循环。在伪代码中，它会是这样的：

foreach department in departments
  <li><h6 class="dropdown-header">{{ department.name }}</h6></li>
  foreach item in department.items
    <li><a class="dropdown-item" href="#">{{ item.label }} </a></li>
  end foreach
end foreach

我知道我可以用 Razer 之类的东西来做到这一点。但是，我无论如何都看不到在 Vue 中执行此操作。然而，我不得不相信我忽略了一些东西，因为渲染层次结构是一种常见的需求。如何在不改变数据结构的情况下在 Vue 中渲染层次结构？

谢谢你。

标签： javascriptvue.js

Answer 1

只需像这样使用嵌套的 v-for ：

<template v-for="(department , i) in departments">
    <li><h6 class="dropdown-header" :key="`head-${i}`">{{ department.name }}</h6></li>
    <template v-for="(item , j) in department.items">
        <li><a class="dropdown-item" href="#" :key="`sub-${i}${j}`">{{ item.label }} </a></li>
    </template>
</template>