javascript - VueJS 日期选择器 : how to dynamically disable dates?

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 在页面加载后立即显示来 self 的 fetch 调用的 disabledDates，但所有日期在我的日期选择器上仍然启用:

硬编码(有效):

当我对几个日期进行硬编码时，它确实将我的日期显示为“已禁用”:

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

我在 Vue devtools 中得到的结果与动态添加它们时(也在页面加载时)相同:

我的实现有什么问题，我应该如何解决这个问题？

编辑

HotelDatePicker 组件是从我的库生成的，其中包含我需要覆盖的 disabledDates 属性。此屏幕截图是通过如上所述的 ajax 调用动态添加 disabledDates 的结果。在我的 ajax 调用之后，两个组件(Datepicker 和 HotelDatePicker)具有相同的 disabledDates，包含相同的数据。但是我的日期没有呈现为“禁用”(仅当我对它们进行硬编码时)

Answer 1

我快速查看了源代码 - 该组件不支持该 Prop 的动态更改。

它在 beforeMount 中解析一次 prop 的内容:

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

并且不关心后续的变化。

可以通过在该 prop 上添加一个 watch 来再次调用该解析方法，或者将其转换为计算 prop 来修复它。

但如果不进行这样的更改，它就无法正常工作。

编辑:让它工作的 hack 看起来像这样:

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

这将强制 Vue 在数组长度发生变化时销毁并重新创建组件。如果 yoiu 在不改变长度的情况下更改数组，那么使用这种键选择是行不通的。