如何在 v-for 循环中填充嵌套的不同内容

问题描述

所以，我想用 v-for 循环创建 20 个扩展面板，用我从 JSON 中获取的每个类别的名称填充每个扩展面板标题。之后，我需要使用 allItems 中每个名称数组的内容填充每个扩展面板内容。如何使用 response.data[0].allItems 的名称填充第一个扩展面板内容，使用 response.data[1].allItems 等的名称填充第二个扩展面板内容。 结果将是 20 个扩展面板，具有 20 个不同的标题（我从 response.data 中获取），每个扩展面板内容将具有 单独 内容（第一个包含 13 个名称的数组，第二个包含 8 个名称）姓名等）。 我的代码的问题是我在每个扩展面板内容中都有相同的内容。

<v-expansion-panels>
  <v-expansion-panel v-for="category in categories" :key="category.name">
    <v-expansion-panel-header>
      {{ category.name }}
    </v-expansion-panel-header>
    <template v-for="category in categories">
      <template v-for="item in category.allItems">
        <v-expansion-panel-content :key="item.id">
          {{ item.name }}
        </v-expansion-panel-content>
      </template>
    </template>
  </v-expansion-panel>
</v-expansion-panels>

async mounted() {
await axios
  .get("/api/menu")
  .then(response => (this.categories = response.data))
  .catch(error => {
    console.log(error);
    this.errored = true;
  })
  .finally(() => (this.loading = false));

JSON 图像

https://i.stack.imgur.com/iRaT3.png

解决方法

无需在每个扩展面板内的类别中再次循环。而是从您在第一个 v-for 中访问的类别对象循环 category.allItems 数组。下面是一个例子：

<v-expansion-panels>
  <v-expansion-panel v-for="category in categories" :key="category.name">
    <v-expansion-panel-header>
      {{ category.name }}
    </v-expansion-panel-header>
     <v-expansion-panel-content>
        <div v-for="item in category.allItems">
             {{ item.name }}
        <div>
     </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

我还没有测试过这个，但试着让我知道它是否有效。 这应该使用包含相应类别中所有项目的 <div> 填充每个扩展面板内容。