VueJS Datepicker：如何動態禁用日期？

Question

我正在將vue-hotel-datepicker庫實現到我的項目中，並且希望在進行ajax調用后將日期動態添加到disabledDates屬性中，但是我的實現似乎不起作用。 當我使用Vue devtools調試時，我可以清楚地看到disabledDates數組包含正確的日期，它只是不會將它們呈現為“ disabled”。 當我對這些日期進行硬編碼時，它會起作用。

模板：

<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會立即從我的fetch調用中顯示disabledDates ，但是所有日期仍在datepicker上啟用：

硬編碼（有效）：

當我對幾個日期進行硬編碼時，它的確將我的日期顯示為“禁用”：

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

在Vue devtools中獲得的結果與動態添加它們時（在頁面加載時）的結果相同：

我的實現有什么問題，我應該如何解決？

編輯

HotelDatePicker組件是從我的庫生成的，該庫包含我需要覆蓋的disabledDates屬性。 該屏幕快照是如上所述通過ajax調用動態添加disabledDates的結果。 在我的ajax調用之后，兩個組件（Datepicker和HotelDatePicker）都具有相同的disabledDates ，其中包含相同的數據。 但是我的日期不會被渲染為“已禁用”（僅當我對它們進行硬編碼時）

Answer 1

我快速查看了源代碼-該組件不支持該道具的動態更改。

它在beforeMount解析一次道具的內容：

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

並且不關心后續更改。

可以通過在該道具上添加watch以再次調用該parse方法或將其轉換為計算的道具來解決。

但是如果沒有這樣的改變，那就根本行不通。

編輯：使其工作的黑客可能是這樣的：

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

當數組的長度更改時，這將迫使Vue銷毀並重新創建組件。 如果yoiu在不更改長度的情況下更改了數組，則使用這種選擇的鍵將無法正常工作。

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));
  }
}