In callback function I can print the value in consoleLog. But, can not get that value in computed property. It shows undefined. Completely stack here.
props: { startDate: Date, // declare prop here expertId: Number | String, leadToOpen: Number | String, config: Object, defaultView: { type: String, default: "timeGridWeek", }, header: { type: Object, default() { return { left: "title", center: "timeGridWeek dayGridMonth dayGrid", right: "today prev,next", }; }, }, goTo: { type: Date, default: null, }, }, data() { return { events: { type: Array, default(){ return{ id: 'a', title: 'my event', start: '2020-10-10' } } }, busy: false, displayAppointment: null, displayOwner: null, eventTypes: [ { name: "Kundentermin", color: "#32bb60" }, { name: "Termin bei Lead", color: "#db0630" }, { name: "Termin ohne Kunde/Lead", color: "#3f888f" }, { name: "Privater Termin (akzeptiert)", color: "#4682B4" }, { name: "Privater Termin (offen)", color: "#505050" }, { name: "Ehemaliger Termin", color: "#cdcdcd" }, ], showEdit: false, showInfo: false, showModal: false, leadId: null, locale: "de", locales: [deLocale], calendarOptions: { headerToolbar: this.header, plugins: [dayGridPlugin, timeGridPlugin], initialView: "timeGridWeek", eventClick: this.eventClickHandler, events: null, slotMinTime: "07:00:00", slotMaxTime: "21:00:00", locale: "de", locales: [deLocale], ref: "calendar", eventDisplay: "block", displayEventTime: false, height: "auto", allDaySlot: false, buttonText: { dayGrid: "Tag", }, lazyFetching: true, datesSet: function (dateInfo) { /////// here is the call back function //////// this.startDate = dateInfo.start; console.log( this.startDate); } }, }; }, computed: { dateRange: function(){ return this.startDate; // undefined } },
Advertisement
Answer
The problem is your callback function. If you want access to the Vue instance, it has to be an arrow function:
dateSet: (dateInfo) => { this.startDate = dateInfo.start }
Inside your callback, this
is not the Vue instance.