javascript - How to store a value in a variable in a callback function in vuejs

Question

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
      }
    },

question from:https://stackoverflow.com/questions/65837532/how-to-store-a-value-in-a-variable-in-a-callback-function-in-vuejs

Answer 1

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.