Fullcalendar and Vuex - vue.js

Question

After fullcalendar updated their props to go outside of the <FullCalendar /> element I have some problems rendering events.
I know that the state request is fulfilled in Vuex because I've tested this so many this without a getter and with a getter and nothing seems to work...
<template>
<v-container>
<FullCalendar :options="calendarOptions" />
<li v-for="event in events" :key="event.id">
{{event.name + ' ' + event.start}}
</li>
</v-container>
</template>
<script>
import FullCalendar from '#fullcalendar/vue'
import dayGridPlugin from '#fullcalendar/daygrid'
import interactionPlugin from '#fullcalendar/interaction'
import timeGridPlugin from '#fullcalendar/timegrid'
import listPlugin from '#fullcalendar/list'
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
components: {
FullCalendar
},
data() {
return {
calendarOptions: {
plugins: [timeGridPlugin, listPlugin ,dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
selectable: true,
events: this.allEvents,
}
}
},
computed: {
...mapState({
events: state => state.calendar.events
}),
...mapGetters('calendar', ['allEvents']),
},
created () {
this.getAll();
},
methods: {
...mapActions('calendar', {
getAll: 'getAll',
}),
}
}
</script>
Is there any way to render the elements with just the state? I thought that setting events to this.events would be working, but I'm probably way off here. I'm new to Vue and Vuex so help is much appreciated! :) The list is just to know that the state is working as it should be.

Answer 1

You can still bind the events in template by doing something like this:
<FullCalendar :options="{
...calendarOptions,
events: events
}" />