1

cree un componente de prueba para poder importarlo a una vista en Vuejs y enviarle los datos que leo de mockapi. Cuando llamo al componente en la vista uso el v-for y le paso el objecto, pero no puedo cargarlo en el v-card. No se que estoy haciendo mal o si me esta faltando algun paso. Podrian darme una mano?

src\components\Listado.vue

<template>
  <v-card class="mx-auto ma-4" max-width="300">
    <v-img class="white--text align-end" height="200px">
      <v-card-title>{{ objproducto.name }}</v-card-title>
    </v-img>

    <v-card-subtitle class="pb-0"> ${{ objproducto.costo }} </v-card-subtitle>

    <v-card-text class="text--primary">
      <div>{{ objproducto.descripcion }}</div>
    </v-card-text>

    <v-card-actions>
 </v-card-actions>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      
    };
  },
  
  props:{
    objproducto: Object
    
  },

  methods:{
    consulta(){
      console.log("Esto deberia ser ",this.objproducto)
    }
  }
};

src\views\ProductList.vue

<template>
  <v-app>
    <v-container>
      <v-row>
        <Listado v-for="producto in productos" :key="producto.id"
          :objproducto="productos" />
        </v-row>
    </v-container>
  </v-app>
</template>

<script>
import Listado from "../components/Listado.vue";
import axios from "axios";

export default {
  data() {
    return {
        productos: Object
   };
  },
 
  components: { Listado },
  mounted() {
    this.obtenerProductos();
  },

  methods: {
    obtenerProductos() {
      axios
        .get("https://61bwqdasdddsa359.mockapi.io/productos")
        .then((data) => {
          this.productos = data.data;
          console.log("Esto es de la vista",this.productos);
        });
    },
  },
};
</script>

Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final

1
  • el comentario sobre el lorem ipsum se agradece, pero en que tiene que ver con tu pregunta? ejjeje. el 13 dic. 2021 a las 18:48

1 respuesta 1

0
<Listado v-for="producto in productos" :key="producto.id"
          :objproducto="productos" />

Aqui estas pasando como objproducto el array de productos, en su lugar debes pasar un solo producto, resultando asi:

<Listado v-for="producto in productos" :key="producto.id"
          :objproducto="producto" />

Esto es asi ya que el v-for repite el componente Listado por cuantos producto existan en productos y en el componente Listado estas esperando el producto, no todos los productos.

Espero te sirva de ayuda.

2
  • 1
    Algo tan sencillo como eso. Muchas gracias estaba quemado el 13 dic. 2021 a las 18:58
  • por nada, sigue aprendiendo que VueJs esta bueno. Saludos el 13 dic. 2021 a las 19:02

Tu Respuesta

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

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