4

Quiero mostrar mi lista de ingredientes en Vuejs de un jugo, esta lista tiene dentro de un array es decir este es mi objeto json introducir la descripción de la imagen aquí

category    
0   
_id "5aa875ab69355c25d0132a41"
title   "Refresh"
ingredient  
0   
category    
0   "5aa875ab69355c25d0132a41"
_id "5aab1df8013dd53774f16578"
name    "Almond Milk"
_id "5aa811e5aa7f7d414c707127"
name    "Confused Strawberry"
image   "j.jpg"

pero cuando le digo

<!-- <div v-for="ingre in items.ingredient" >
  {{ingredient.name}}
 </div> -->

me dice que no reconocer ingredient,

¿Cómo puedo hacer el loop dentro de ingredient para que me de el nombre?

Este es mi codigo de Vue

<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>

¿Qué tengo mal para que no me de el nombre del ingrediente?

2
  • ¿Por qué tienes comentado el código del for?
    – Shaz
    Commented el 16 mar. 2018 a las 21:05
  • 1
    Es que esa parte me genera conflicto y no me muestra nada la pagina si lo dejo, por que dice que es un objeto no definido
    – Bella
    Commented el 16 mar. 2018 a las 21:11

1 respuesta 1

4

Si entiendo bien la estructura de tus datos y lo que intentas hacer, deberías iterar primero los items y luego los ingredientes de cada uno, si es que tienes más de uno de estos últimos:

<div v-for="item in items">

  {{ item.name }}

  <div v-for="ingre in item.ingredient">

    {{ ingre.name }}

  </div>

</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.