VueJS Datepicker：如何动态禁用日期？

Question

我正在将vue-hotel-datepicker 库实现到我的项目中，我希望在进行ajax 调用后动态地将日期添加到disabledDates 属性，但我的实现似乎不起作用。当我使用 Vue 开发工具进行调试时，我可以清楚地看到 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 在页面加载后立即显示来自我的 fetch 调用的disabledDates，但我的日期选择器上仍然启用所有日期：

硬编码（有效）：

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

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

我在 Vue 开发工具中得到的结果与我动态添加它们时的结果相同（也在页面加载时）：

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

编辑

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

Answer 1

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

解析prop的内容一次，在beforeMount:

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

并且不关心后续的变化。

可以通过在该道具上添加watch 以再次调用该解析方法或将其转换为计算道具来解决此问题。

但如果没有这样的改变，它根本就行不通。

编辑：让它工作的黑客可能看起来像这样：

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

这会在数组长度发生变化时强制 Vue 销毁并重新创建组件。如果你在不改变长度的情况下改变数组，那么选择这个键就行不通了。

Answer 2

由于您正在获取它们，因此您无需在标签上添加属性:disabledDates="disabledDates"。对于请求，您可以使用 mount 钩子在组件安装时发送请求，然后在收到数据时更新禁用日期：

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