search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

update is Undefined (Calendar)

Asked by Arthur
1 year ago.

Hello,

Recently, I put online my app with the lite calendar. One of my client reported me a bug where events don't show on the calendar sometimes.
I tried myself with his account and i saw in logs that TypeError: Cannot read properties of undefined (reading 'update').
It never happened to me before so I don't really understand why ?

Here is an example of my code :

Vue :
<DayPilotCalendar id="dp" :config="config" ref="calendar" />

Typescript :

computed: {
    calendar() {
        return this.$refs.calendar?.control;
    }
},

data() {
   return {
     events : [],
  }
},

async created() {
    // code for something else
        this.loadEvents();
    }
},

methods : {
    async loadEvents() {
        await this.getAllRequest().then(res => {
            // placeholder for an HTTP call
            const events = this.events;
            this.calendar.update({ events });
        })
    },

    async getAllRequest() {
        this.events = [];
        await this.backend.getAllRequest().then(async res => {
             // code for data
        })
    },
},

I hope this help !
Thanks in advance !

Answer posted by Dan Letecky [DayPilot]
1 year ago.

The value of "this.$refs.calendar" will be null before the component is mounted.

That means the computed "calendar()" method will return null as well.

If you call "loadEvents()" too early it will throw this error. I recommend moving the invocation of loadEvents() to the "mounted()" handler.

Comment posted by Anonymous
1 year ago.

Thanks for the answer !
Does the mounted() handler will wait for the computed to finish ?

Comment posted by Dan Letecky [DayPilot]
1 year ago.

1. If you call this.calendar in mounted() or later it will have the correct value. It's not necessary to wait for it in this case.

2. If you call this.calendar earlier the value may or may not be available. For example, if you call loadEvents() in created() it will fail if getAllRequests() is fast and resolves before the mounted() event.

You could create a special function to replace this.calendar that would return a Promise when the value is available but it would be more complex.

Note: You are using both "await" and "then()" on functions that return a Promise. The purpose of await is to let you continue the flow in the main block of code after the Promise is resolved instead of in the callback that you specify in then(). You can find a nice explanation and comparison here:

https://mathiasbynens.be/notes/async-stack-traces

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.