我是VueJS的新手,正在将vue-hotel-datepicker库合并到我的项目中。

目标:根据月份更改minNights数据属性。我能够如documentation中所述简单地覆盖该值。

javascript - VueJS Datepicker:根据月份动态更改数据-LMLPHP

问题:minNights应该在8月和7月为8。当我使用Vue检查器时,我可以看到HotelDatePicker组件(从库中导入)具有'activeMonthIndex',因此我相信我应该使用它。但是,如何从父母那里访问此数据属性?如何根据月份动态更改minNights属性?

javascript - VueJS Datepicker:根据月份动态更改数据-LMLPHP

我的模板:

<datepicker
    :startDate="startDate"
    @check-in-changed="setCheckInDate"
    @check-out-changed="setCheckOutDate"
    :maxNights="21"
    :minNights="minNights" //dynamic based on month
    :checkIn="checkIn"
    :checkOut="checkOut"
    :disabledDates="bookedDates"
    :firstDayOfWeek="1"
    :i18n="lang"
    :showYear="true"
 >




我为希望查看我的代码的人做了一个gist
任何指导是非常感谢。

最佳答案

您的minNights道具应绑定到computed属性,例如:

<datepicker
:startDate="startDate"
@check-in-changed="setCheckInDate"
@check-out-changed="setCheckOutDate"
:maxNights="21"
:minNights="minNights" //dynamic based on month
:checkIn="checkIn"
:checkOut="checkOut"
:disabledDates="bookedDates"
:firstDayOfWeek="1"
:i18n="lang"
:showYear="true"
>


脚本:

  computed:{
        minNights(){

          let currentMonth=this.$children[0]._data.activeMonthIndex;
          if(currentMonth==6 || currentMonth==7){
             return currentMonth;
           }
         }
     }

09-18 13:00