javascript - 为对象 VueJs 中的每个数组项创建 <li> 列表

Question

我试图在文档中找到方法，但找不到。在 Vue JS 中，我有这个 data 结构:

recipes: [ 
  {
    name: string, 
    ingredients: [array],
    link: string
  } 
]

我可以制作一个 v-for 并让我的应用程序显示名称、链接和成分。但是，我找不到循环成分数组并使其像列表一样显示的方法。

这就是现在的样子:

我希望它是这样的:

• 西红柿
• 面包
• 大蒜

所以，基本上我需要知道如何请求对象内数组中项目的迭代。

这是我的组件的代码:

<!-- This creates a card per recipe -->
<template >
  <div v-if="cardView" class="recipes container section">
    <div class="row">
      <div v-for="recipe in recipes" class="col s12 m6">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <h1 class="card-title">{{recipe.name}}</h1>
            <h2>Ingredients</h2>
            <ul>
              <li v-for="(recipe,index) in recipes" :key="index">{{recipe.ingredients}}</li>
            </ul>
            <ul>
              <li v-for="recipe in recipes">{{recipe.meals}}</li>
            </ul>
          </div>
          <div class="card-action">
            <a href="#">Full Recipe</a>
            <a href="#">Add to Week Menu</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { db } from "@/firebase/config";

export default {
  name: "RecipesCards",
  data() {
    return {
      recipes: []
    };
  },
  methods: {},

  created() {
    db.collection("Recipes")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          let recipe = doc.data();
          recipe.id = doc.id;
          this.recipes.push(recipe);
          console.log(this.recipes);
        });
      });
  },

  props: ["cardView"]
};
</script>

Answer 1

如果我理解正确，那么你想改变这一点:

<li v-for="(recipe,index) in recipes" :key="index">{{recipe.ingredients}}</li>

对此:

<li v-for="(ingredient, index) in recipe.ingredients" :key="index">{{ ingredient }}</li>

这里的recipe是由您已有的div上周围的v-for定义的。