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开发人员工具会在页面加载后立即显示我的提取调用中的disabledDates，但仍在日期选择器上启用所有日期：

硬编码（有效）：

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

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

也不关心后续更改。

可以通过在该prop上添加一个watch来再次调用该parse方法，或将其转换为计算的prop来解决此问题。

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

编辑：使其正常工作的黑客看起来像这样：

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

当数组的长度改变时，这将迫使Vue销毁并重新创建组件。如果您在不更改长度的情况下更改了数组，那么使用这种选择的键将无法正常工作。

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

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

2 个答案: