CODEWITHSUNDEEP
vue.jsfullcalendarvuexfullcalendar-5
Lucas Marra
Lucas Marra

Reputation: 327

Event is not rendering from $store.state Vuex

I'm facing problem to render my events on calendar, my Vuex is working fine (I think).
I can log my events in console.log and check in Vue DevTools.

Any advice to render on calender after I create in Vuex?
methods:

  methods: {
    handleDateClick(arg) {
      /* Get click event data */
      console.log(arg);
      /* Get event data in store */
      console.log(this.$store.state.events);
      this.$store.commit("addEvent", {
        id: new Date().getTime(),
        title: "Some event",
        start: arg.dateStr,
        allDay: arg.allDay,
      });
    },
  }

computed:

  computed: {
    ...mapGetters(["events"]),
  }

Calendar component:

<Fullcalendar :options="calendarPlugins" :header="headerToolbar">
      <template #eventContent="{ timeText, event }">
        <b>{{ timeText }}</b>
        <i>{{ event.title }}</i>
      </template>
    </Fullcalendar>

Print of console and Vue DevTools: https://prnt.sc/2MzjMVmFSffT

I'm getting all data I need, but still not rendering on calendar...
Edit: full code https://github.com/lucaspmarra/fullcalendar-test

Upvotes: 0

Views: 175

Answers (1)

Robin Uphoff
Robin Uphoff

Reputation: 634

Since I can't see the full code example I can only guess, that you did not define a getter as followed:

events: (state) => state.events,

If you want to compute the state, change your code to

  computed: {
    ...mapState(["events"]),
  }

Hope I could help!

Upvotes: 1

Related Questions