VueJS Datepicker：如何动态禁用日期？ [英] VueJS Datepicker: how to dynamically disable dates?

问题描述

我正在将

硬编码（有效）：

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

  data（）{
 return {
 disabledDate：['2019-02-03'，'2019-02-04'] 
} 
} 
  

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

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

编辑

HotelDatePicker 组件是从我的库中生成的，该库包含 disabledDates 我需要覆盖的属性。该屏幕快照是如上所述通过ajax调用动态添加 disabledDates 的结果。在我的ajax调用之后，两个组件（Datepicker和HotelDatePicker）都具有相同的 disabledDates ，其中包含相同的数据。但是我的日期不会被渲染为已禁用（仅当我对其进行硬编码时）

解决方案

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

它解析内容道具一次，在 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销毁并重新创建组件。如果yoiu在不更改长度的情况下更改了数组，则使用这种选择的键将无法正常工作。

I'm implementing the vue-hotel-datepicker library into my project and I wish to dynamically add dates to the disabledDates property after making an ajax call, but my implementation does not seem to work. When I debug using the Vue devtools, I can clearly see that the disabledDates array contains my correct dates, it just does not render them as 'disabled'. It works when I hardcode those dates.

Template:

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

Debugging steps: The Vue devtools shows the disabledDates from my fetch call immediately upon page load, but all dates are still enabled on my datepicker:

Hardcoded (works):

When I hardcode a couple of dates, it does display my dates as 'disabled':

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

And I get the same results in the Vue devtools as when I add them dynamically (also on page load):

What is wrong about my implementation and how should I fix this?

EDIT

The HotelDatePicker component is generated from my library, which contains the disabledDates property that I need to overwrite. This screenshot is the result from dynamically adding the disabledDates via an ajax call as explained above. After my ajax call, both components (Datepicker and HotelDatePicker) have the same disabledDates, containing the same data. But my dates are not rendered as being 'disabled' (only when I hardcode them)

解决方案

I had a quick look at the source - that component doesn't support a dynamic change of that prop.

It parses the content of the prop once, in beforeMount:

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

And doesn't care about subsequent changes.

It could be fixed by adding a watch on that prop to call that parse method again, or turning it into a computed prop instead.

But without such a change it simply doesn't work.

edit: a hack to make it work could look like this:

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

Which will force Vue to destroy and re-create the component when the length of the array changes. If yoiu change the array without changing length, it wouldn't work though with this choice of key.

这篇关于VueJS Datepicker：如何动态禁用日期？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！