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

Question

所以，我想创建 20 个带有 v-for 循环的扩展面板，用我从 JSON 中获取的每个类别的名称填充每个扩展面板 header。之后，我需要用 allItems 中每个名称数组的内容填充每个扩展面板内容。如何使用名称 response.data[0].allItems 填充第一个扩展面板内容，使用 response.data[1].allItems 等名称填充第二个扩展面板内容。结果将是 20 个扩展面板，有 20 个不同的 headers（我从 response.data 中获取）并且每个扩展面板内容将有 seperate 内容（第一个一个包含 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

Answer 1

无需在每个扩展面板内的类别中再次循环。而是从您在第一个 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> 填充每个扩展面板内容。

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

How can I populate nested different content inside v-for loop

vue.js

nested

nuxt.js

vuetify.js

populate