我是VueJS的新手,正在将vue-hotel-datepicker
库合并到我的项目中。
目标:根据月份更改minNights
数据属性。我能够如documentation中所述简单地覆盖该值。
问题:minNights
应该在8月和7月为8。当我使用Vue检查器时,我可以看到HotelDatePicker
组件(从库中导入)具有'activeMonthIndex',因此我相信我应该使用它。但是,如何从父母那里访问此数据属性?如何根据月份动态更改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
。任何指导是非常感谢。
最佳答案
您的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;
}
}
}