0👍
✅
Makes sense, cause you’re itterating over the same array and returning ingredients values, and value of each object is an array.
Since your list is inside recipes loop, you may iterate over the array of each object of that array, so your v-for of a list should look like this
<li v-for="(ingredient, index) in recipe.ingredients" :key="index">
{{ingredient}}</li>
Another approach – make component for each card and return ingredients as an array through computed properties.
1👍
If I’ve understood correctly then you want to change this:
<li v-for="(recipe,index) in recipes" :key="index">{{recipe.ingredients}}</li>
to this:
<li v-for="(ingredient, index) in recipe.ingredients" :key="index">{{ ingredient }}</li>
Here recipe is defined by the surrounding v-for on the div, which you already have.
Source:stackexchange.com