VueJS Hotel Datepicker: проблема в получении выбранной даты через прослушиватель событий

Question

Я новичок в VueJS и пытаюсь реализовать vue-hotel-datepicker в моем проекте. Однако я не понимаю, как использовать прослушиватель событий checkInChanged.

Это мой шаблон кода:

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

  </datepicker>

Мой метод:

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

Это событие происходит еще до того, как я выберу дату заезда. Как лучше всего это реализовать и как получить экземпляр даты в моем методе setCheckinDate()?

EDIT : см. мой гист для полного кода. Я изменил свой слушатель с :checkInChanged на @checkInChanged, как предлагается в комментариях, но событие не запускается.

Answer 1

checkInChanged - это событие, а не опора, поэтому вы должны использовать v-on:check-in-changed или @check-in-changed вместо :checkInChanged и удалить () из обработчика:

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

и ваш метод должен быть таким:

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