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