如何在vuejs中的回调函数中将值存储在变量中

Question

在回调函数中，我可以在 consoleLog 中打印值。但是，无法在计算属性中获得该值。它显示未定义。完全堆到这里。

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

Answer 1

你可以试试：

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

或者您没有在外部组件中提供 prop 值

Answer 2

问题出在你的回调函数上。如果你想访问 Vue 实例，它必须是 arrow function:

dateSet: (dateInfo) => {
  this.startDate = dateInfo.start
}

在您的回调中，this 不是 Vue 实例。

如何在vuejs中的回调函数中将值存储在变量中

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

javascript

callback

vue.js

vuejs2