Vuetify 日期选择器中的允许日期属性没有响应

Question

我有一个显示 Vuetify 日期选择器组件的网页。

加载页面或更改月份时，我会进行 AJAX 调用，运行 SQL 查询 return 特定月份的日期事件发生。

然后，我只想让这些特定日期可点击。

根据 Vuetify documentation，allowed-dates 属性允许您执行此操作。

经过一些实验，我遇到了一些意想不到的困难：

allowed-dates 属性接受一个函数而不是，例如，一个数组。因此，我必须创建一个函数来查询“允许的日期”数组，该数组由我的 AJAX 调用
此外，该函数是在呈现日期选择器时调用的，而不是在 AJAX 调用 return 时调用的，所以我最终没有激活任何日期或只有一个日期被激活仅在激活月份的最后一天。

我错过了什么吗？允许的日期属性是否没有响应？我更愿意坚持使用 Vuetify，因为我在 UI 的其余部分使用它，但如果找不到解决方案，我愿意切换到其他东西。

Answer 1

当文档中的一个例子说的时候有些混乱：

You can specify allowed dates using arrays, objects, and functions.

但在 API allowed-dates 中只消耗函数。

我想答案是正确定义 allowedDates 函数。

您首先需要创建一个空的反应数组，然后通过 AJAX 调用将数据分配给它，并且在 allowedDates 函数中您可以比较显示的包含数组中日期的日期页面。

所以代码是...

<v-date-picker
  v-model="date"
  :allowed-dates="allowedDates"
/>

...

data: () => ({
  date: '2022-01-11',
  allowedDatesArray: [],
}),
mounted() {
  this.getAllowedDates();
},
methods: {
  allowedDates(val) {
    return this.allowedDatesArray.includes(val);
  },
  async getAllowedDates() {
    this.allowedDatesArray = [];
    await //...your AJAX call that must assign allowedDatesArray
  }
}

我创建了 a sandbox at CodePen，您可以在其中使用一些使用 Promise 异步加载的静态日期测试此解决方案。

在您的解决方案中，您需要将 Promise 替换为 AJAX 调用。

Vuetify 日期选择器中的允许日期属性没有响应

allowed-dates attribute in Vuetify date picker is not responsive

calendar

date

datepicker

vue.js

vuetify.js