0
654
Vistas¿Por qué esta v-for no se representa correctamente y la devuelvo correctamente en la plantilla?
Soy bastante nuevo en Vuejs, acabo de crear un conjunto de datos falso con json. El archivo contiene una matriz de 3 objetos. Cuando reviso console.log, pude entender que Axios.get (URL) está obteniendo los datos correctamente, pero v-for parece no tener efecto y no puedo entender por qué sucede.
Aquí está el código (componente principal):
<template> <div class="home"> <EventCard v-for="event in events" :key="event.id" :event="event" /> </div> </template> <script> import EventCard from "@/components/EventCard.vue"; import axios from "axios"; import { onBeforeMount } from "vue"; export default { name: "EventList", components: { EventCard, }, setup() { let events = []; onBeforeMount(async () => { const res = await axios.get( "https://my-json-server.typicode.com/Tommydemian/real-world-vue-3/db" ); const { data } = res; events = data.events; console.log(events); }); return { events, }; }, }; </script> consola.log: 
código (Componente secundario) que recibe el accesorio:
<template> <div class="event-card"> <span>@{{ event.time }} on {{ event.date }}</span> <h4>{{ event.title }}</h4> </div> </template> <script> export default { name: "EventCard", props: { event: Object, }, setup() { console.log(); }, }; </script>3 Respuestas
Responde la pregunta0
events deben ser una ref o reactive para que sean reactivos en la plantilla:
// EventList.vue 👇 import { onBeforeMount, ref } from 'vue' export default { name: 'EventList', components: { EventCard, }, setup() { 👇 let events = ref([]) onBeforeMount(async () => { const res = await axios.get('https://my-json-server.typicode.com/Tommydemian/real-world-vue-3/db') const { data } = res 👇 events.value = data.events console.log(events.value) }) return { events, } }, }0
en su consola, events tiene otro objeto llamado events, necesita asignar datos a res.events para acceder a la matriz principal de objetos
estás pasando eventos en lugar de eventos
<template> <div class="home"> <EventCard v-for="event in events" :key="event.id" :event="event" /> </div> </template> ```0
Solo necesita pasar el event como accesorios en EventCard y no como events . Dado que los events es la recopilación de datos. Tiene que volver a repetirse una vez que se haya incluido en el componente secundario como accesorios. Dado que está realizando un bucle de eventos en el componente principal. Es mejor pasar solo el event a través de accesorios.
<EventCard v-for="event in events" :key="event.id" :event="event" />