Currently, I am attempting to iterate through an array of objects retrieved from the backend and display these objects on the frontend. The Vue framework is throwing an error stating that "event" is not defined on the instance but referenced during render. It seems like there might be an issue with my use of the event variable in the v-for loop within the template.
Component:
<template>
<div>
<span v:for="(event, index) in eventList" :key="event.id">
{{ event.id }}
</span>
</div>
</template>
<script>
import eventHelpers from "@/mixins/eventHelpers";
export default {
name: 'eventsList',
mixins: [eventHelpers],
data() {
return {
eventList: [],
}
},
async mounted() {
this.eventList = await this.getAllEvents();
},
methods: {
}
}
</script>
This <span> element will eventually become a card component once I resolve this issue with the data.