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

Question

我正在将vue-hotel-datepicker库实现到我的项目中,并希望在进行ajax调用后动态地将日期添加到disabledDates属性,但我的实现似乎不起作用.当我使用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在页面加载时立即显示来自我的提取调用,但仍然在我的datepicker上启用了所有日期:

硬编码(有效):

当我硬编码了几个日期,它确实显示我的日期为"已禁用":

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

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

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

编辑

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

Answer 1

我快速浏览了一下源代码 - 该组件不支持该支柱的动态更改.

它解析道具的内容一次,在beforeMount:

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

并不关心后续的变化.

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

但如果没有这样的改变,它就行不通.

编辑:使其工作的黑客可能如下所示:

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

当数组长度发生变化时,会强制Vue销毁并重新创建组件.如果yoiu在不改变长度的情况下更改数组,则使用此键选择将无法工作.