VueJS Datepicker: как динамически отключать даты?

Question

Я внедряю библиотеку vue-hotel-datepicker в свой проект и хочу динамически добавлять даты в свойство disabledDates после выполнения вызова ajax, но моя реализация делает не похоже на работу. Когда я выполняю отладку с помощью Vue devtools, я ясно вижу, что массив disabledDates содержит мои правильные даты, просто не отображает их как 'отключенные'. Это работает, когда я жестко кодирую эти даты.

Шаблон:

<datepicker
     :disabledDates="disabledDates" 
     :firstDayOfWeek="1"                
    >
</datepicker>

JS:

data() {
   return {
      disabledDates: this.fetchBookedDates() //contains correct data, see screenshot below
    }
},
methods: {
    fetchBookedDates() {
       window.fetch(Routing.generate('bookings'))
         .then(response => response.json())
         .then(data => this.disabledDates = data['period'])
         .catch((error) => console.log(error));
      }
}

Шаги отладки: Vue devtools показывает disabledDates из моего вызова извлечения сразу после загрузки страницы, но все даты по-прежнему включены в моем указателе даты:

Закодировано (работает):

Когда я жестко кодирую пару дат, показывает мои даты как «отключенные»:

data() {
   return {
     disabledDates: ['2019-02-03', '2019-02-04']
    }
}

И я получаю те же результаты в devtools Vue, что и при их динамическом добавлении (также при загрузке страницы):

Что плохого в моей реализации и как мне это исправить?

EDIT

Компонент HotelDatePicker генерируется из моей библиотеки, которая содержит свойство disabledDates, которое мне нужно перезаписать. Этот снимок экрана является результатом динамического добавления disabledDates с помощью вызова ajax, как описано выше. После моего вызова ajax оба компонента (Datepicker и HotelDatePicker) имеют одинаковый disabledDates, содержащий одинаковые данные. Но мои даты не отображаются как «отключенные» (только когда я жестко их кодирую)

Answer 1

Я быстро взглянул на источник - этот компонент не поддерживает динамическое изменение этого реквизита.

Разбирает содержимое пропора один раз, в beforeMount:

https://github.com/krystalcampioni/vue-hotel-datepicker/blob/master/src/components/DatePicker.vue#L529

И не заботится о последующих изменениях.

Это можно исправить, добавив watch к этой подпорке для повторного вызова этого метода разбора, или вместо этого превратив его в вычисляемую подпорку.

Но без такого изменения оно просто не работает.

edit: взлом, чтобы заставить его работать, мог выглядеть так:

<datepicker
     :disabledDates="disabledDates" 
     :firstDayOfWeek="1"
     :key="disabledDates.length"               
    >
</datepicker>

Что заставит Vue уничтожить и заново создать компонент при изменении длины массива. Если вы измените массив без изменения длины, он не будет работать с этим выбором ключа.

Answer 2

Поскольку вы извлекаете их, вам не нужно добавлять свойство :disabledDates="disabledDates" в ваш тег. Для запроса вы можете использовать подключенный хук, чтобы отправить запрос при монтировании компонента, а затем обновить даты отключения при получении данных:

data() {
  return {
    disabledDates: []
  }
},
mounted() {
  this.fetchBookedDates();
},
methods: {
  fetchBookedDates() {
    const that = this;

    window.fetch(Routing.generate('bookings'))
      .then(response => response.json())
      .then(data => that.disabledDates = data['period'])
      .catch((error) => console.log(error));
  }
}