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

tao · Accepted Answer · 2021-01-22 00:20:00Z

4

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.

answered Jan 22, 2021 at 0:20

tao

91.1k18 gold badges138 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tao Over a year ago

console.log() is your friend, @Abhijit. When you don't understand why something happens, console.log() at each step and it will talk to you. Happy coding!

Loki · Accepted Answer · 2021-01-22 00:13:43Z

2

Could you try with:

computed: {
   getDateRange() {
        return this.startDate;
   }
}

Or maybe you did not provide prop value in outer component

answered Jan 22, 2021 at 0:13

Loki

1,2334 gold badges31 silver badges67 bronze badges

2 Comments

Abhijit Mondal Abhi Over a year ago

I tried with this. It doesn't work. And outer component means? @Loki

Abhijit Mondal Abhi Over a year ago

Actually I just need to store the value in the callback function. And then need it in the Computed property. I don't know should I declare the variable in prop or data!!

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related