VueJS Datepicker: динамически изменять данные на основе месяца

Question

Я новичок в VueJS и включаю библиотеку vue-hotel-datepicker в свой проект.

Цель : изменить свойство данных minNights в зависимости от месяца. Я смог просто переопределить это значение, как описано в документации .

Задача : minNights должно быть 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"
 >

Я сделал гист для тех, кто хочет увидеть мой код. Любое руководство высоко ценится.

Answer 1

Ваш 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"
>

script:

  computed:{
        minNights(){

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