javascript - VueJS 酒店日期选择器 : issue in getting selected date via event listener

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() 方法中获取日期实例？

编辑: 看我的gist完整代码。我已按照评论中的建议将我的监听器从 :checkInChanged 更改为 @checkInChanged，但事件没有被触发。

Answer 1

checkInChanged 是一个事件而不是 prop，因此您应该使用 v-on:check-in-changed 或 @check-in-changed 而不是 :checkInChanged 并从处理程序中删除 () :

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

你的方法应该是这样的:

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