Составьте список <li>для каждого элемента массива в объекте VueJs

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 определяется окружением v-for вdiv, который у вас уже есть.

Answer 2

Имеет смысл, потому что вы итерируете по одному и тому же массиву и возвращаете значения ингредиентов, а значение каждого объекта является массивом.

Поскольку ваш список находится внутри цикла рецептов, вы можете перебирать массивкаждый объект этого массива, поэтому ваш v-for списка должен выглядеть следующим образом

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

Другой подход - создать компонент для каждой карты и вернуть ингредиенты в виде массива через вычисленные свойства.