I'm new to working with Vuejs and recently created a mock dataset using JSON. The JSON file consists of an array containing 3 objects. Although console.log shows that Axios.get(URL) is fetching the data correctly, the v-for directive doesn't seem to be having any effect and I'm struggling to figure out why.
Below is the code for the Parent Component:
<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>
console.log: https://i.sstatic.net/S70JH.png
Code snippet for the Child Component which receives the prop:
<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>