Vuetify：嵌套 v-for 用于在卡片中制作列表

Question

我正在尝试使用 JSON 文件中的数据创建食谱卡组件。我可以成功地让卡片使用正确的数据进行渲染。然而，在 JSON 文件中，每个食谱都包含一个嵌套的成分数组。我正在尝试让成分在食谱卡内显示为列表。

这是组件 html

<template>
  <v-container>
    <v-row v-for="recipe in recipes" :key="recipe.id" align-center>
      <v-col>
        <v-card
        class="mx-auto my-12"
        :recipe="recipe"
        max-width="374">
          <v-img
          class="align-end text-white"
          cover
          :src="recipe.image">
          </v-img>
          <v-card-title>
            {{ recipe.title }}
          </v-card-title>
          <v-row>
            <v-col dense cols="12">
              <v-list v-for="item in recpies.missedIngredients" :key="item.id">
                <v-list-subheader>
                  Missing Ingredients {{ recipe.missedIngredientCount }}
                </v-list-subheader>
                <v-list-item>
                  {{ item.name }}
                </v-list-item>
              </v-list>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

这就是脚本

<script>
export default {
  data() {
    return {
      recipes: {}
    }
  },
  mounted() {
    fetch('http://localhost:3000/recipes')
    .then(res => res.json())
    .then(data => this.recipes = data)
    .catch(err => console.log(err.message))

  }
}
</script>

如何成功访问嵌套数组中的数据并将其呈现为卡片内的列表？

Answer 1

我觉得自己像个傻瓜。经过一番修补后，我设法弄清楚了。

这是我的代码现在的样子：

<template>
  <v-container>
    <v-row v-for="recipe in recipes" :key="recipe.id" align-center>
      <v-col>
        <v-card
        class="mx-auto my-12"
        :recipe="recipe"
        max-width="374">
          <v-img
          class="align-end text-black"
          cover
          :src="recipe.image">
          <v-card-title>
            {{ recipe.title }}
          </v-card-title>
          </v-img>

          <v-row>
            <v-col dense cols="12">
              <v-list density="compact">
                <v-list-subheader>
                  Missing Ingredients {{ recipe.missedIngredientCount }}
                </v-list-subheader>
                <v-list-item v-for="item in recipe.missedIngredients"
                :key="item.id">
                {{ item.name }}
                </v-list-item>
              </v-list>
            </v-col>
            <v-col>

            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>