I want to show my list of ingredients in Vuejs of a juice, this list has inside an array that is to say this is my json object
category
0
_id "5aa875ab69355c25d0132a41"
title "Refresh"
ingredient
0
category
0 "5aa875ab69355c25d0132a41"
_id "5aab1df8013dd53774f16578"
name "Almond Milk"
_id "5aa811e5aa7f7d414c707127"
name "Confused Strawberry"
image "j.jpg"
but when I say
<!-- <div v-for="ingre in items.ingredient" >
{{ingredient.name}}
</div> -->
tells me not to recognize ingredient,
How can I do the loop inside the ingredient to give me the name?
This is my Vue code
<template>
<div class="details">
<h1 class="hidden">Back to Juices</h1>
<router-link :to="{ name: 'DisplayItem' }" id="back">
BACK TO JUICES
</router-link>
<h1 class="hidden">Product Image</h1>
<div class="img-juice col-xs-6" >
<img class="image-detail" :src="'../public/images/' + items.image " />
</div>
<h1 class="hidden">Product detail</h1>
<div class=" col-xs-6">
<h2 class="name">{{items.name}}</h2>
<hr>
<h2 class="ingre">INGREDIENTS</h2>
<!-- <div v-for="ingre in items.ingredient" >
{{ingredient.name}}
</div> -->
<h2 class="name">{{items.ingredient}}</h2>
<h2 class="ingre">CATEGORY</h2>
<!--<h3 v-for="category in item.categories">{{category.name}}</h3>-->
</div>
</div>
</template>
<script>
export default {
name: 'DetailsItem',
data () {
return {
items: {}
}
},
created ()
{
var vm=this;
axios.get('http://localhost:3000/item/' + this.$route.params.id).then(function(response){
console.log(response.data);
vm.items=response.data;
})
}
}
</script>
What am I wrong with so that you do not give me the name of the ingredient?