javascript - VueJS 日期选择器 : dynamically change data based on month

Question

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

目标:根据月份更改minNights 数据属性。我能够按照 documentation 中的描述简单地覆盖该值.

问题:minNights 在八月和七月应该是 8。当我使用 Vue 检查器时，我可以看到 HotelDatePicker 组件(从库中导入)有一个“activeMonthIndex”，所以我相信我应该使用它。但是我怎样才能从我的 parent 那里访问这个数据属性呢？如何根据月份动态更改 minNights 属性？

我的模板:

<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对于那些希望看到我的代码的人。 非常感谢任何指导。

Answer 1

您的 minNights Prop 应该绑定(bind)到一个 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;
           }   
         }
     }