VueJS Hotel Datepicker: issue in getting selected date via event listener

问题

I am new to VueJS and trying to implement the vue-hotel-datepicker in my project. However, I don't understand how to use the checkInChanged event listener.

This is my template code:

 <datepicker
     :startDate="startDate"
     :checkInChanged="setCheckinDate()" //probem occurs here
     :maxNights="30"
     :disabledDates="bookedDates"
     :firstDayOfWeek="1"
     :i18n="lang"
     :showYear="true"
    >

  </datepicker>

My method:

 methods: {
     setCheckinDate() {
       console.log('test');
     }
 }

This event fires before I even select a check in date. How should I best implement this and how can I grab the date instance in my setCheckinDate() method?

EDIT: see my gist for the complete code. I have changed my listener from :checkInChanged to @checkInChanged as suggested in the comments, but the event does not get fired.

回答1:

checkInChanged is an event not a prop so you should use v-on:check-in-changed or @check-in-changed instead of :checkInChanged and remove the () from the handler :

    <datepicker
        :startDate="startDate"
        @check-in-changed="setCheckinDate"
         ...

and your method should be like :

   methods: {
      setCheckinDate(newDate) {
        console.log(newDate);
     }
 }

来源：https://stackoverflow.com/questions/54005199/vuejs-hotel-datepicker-issue-in-getting-selected-date-via-event-listener