Dealing with a simple concept error, I find myself unable to solve it. Within the onMounted hook, everything looks correct - an Array of three objects is displayed. However, when I return it to the template and try to interpolate it, all I see is an empty Array.
Here's the code snippet:
<template>
<div class="container">
<h1>Events for good</h1>
<img alt="Vue logo" src="../assets/logo.png" />
<EventCard v-for="event in events" :key="event.id" :event="event"/>
{{ events }}
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import { Event } from '@/types/event';
import EventCard from '@/components/EventCard.vue';
import axios from 'axios';
export default defineComponent({
name: 'EventList',
components: {
EventCard
},
setup() {
let events = reactive<Event[]>([])
onMounted( async() => {
const response = await axios.get('http://localhost:3000/events');
console.log(response.data)
events = response.data
console.log(events)
})
return {
events
}
}
});
</script>
Take a look at the log and interpolation image here: https://i.sstatic.net/wCJcm.png