Vuetify.js Datepicker 为数组中的每个 datepicker 设置允许的日期答案

【问题标题】：Vuetify.js Datepicker set allowed dates for each datepicker in arrayVuetify.js Datepicker 为数组中的每个 datepicker 设置允许的日期
【发布时间】：2020-12-06 20:27:13
【问题描述】：

我有这个 toAllowedDates 方法，它允许日期选择器只选择一个间隔只有 1 天的日期范围。我已经尝试解决这个问题将近半天了，几乎没有运气。如果我能得到任何意见，这将有所帮助。也许我的做法一开始就错了。

methods: {
  toAllowedDates(val) {
    // I need the index here but if I pass the index in the loop it will not pass the value
    const today = this.$moment(this.schedules[index].dayFrom, "YYYY-MM-DD")
    const maxAllowedDate = today.clone().add(1, "days")
    const currentDate = this.$moment(val)
    return !today.isAfter(currentDate) && !currentDate.isAfter(maxAllowedDate)
    }
  }

默认情况下，这将通过 vals(day1~day30)

<template v-for="(schedule, index) in schedules">
  <sw-calendar-range 
   :value="[schedule.workdayDateFrom, schedule.workdayDateTo]"
   :to-allowed-dates="toAllowedDates"
   @input="updateWorkdaySchedule(['workdayDateFrom', 'workdayDateTo'], index, $event)">
  </sw-calendar-range>
</template>

我试图将索引传递给 toAllowedDates 方法但没有运气

<template v-for="(schedule, index) in schedules">
  <sw-calendar-range 
   :value="[schedule.workdayDateFrom, schedule.workdayDateTo]"
   :to-allowed-dates="toAllowedDates(val, index)"
   @input="updateWorkdaySchedule(['workdayDateFrom', 'workdayDateTo'], index, $event)">
  </sw-calendar-range>
</template>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

我最终为每个允许的日期创建了一个函数。我希望这对将来的某人有所帮助。

在我的数据中，我为我的方法创建了一个空数组

data: () => ({
    ...
    newMethods: []
  }),

在我的方法中

setAllowedDatesTo(idx) {
      this.$set(this.allowedDates, 'To' + idx, val => {
        const today = this.$moment(this.formWorks.workdaySchedules[idx].workdayDateFrom, "YYYY-MM-DD")
        const maxAllowedDate = today.clone().add(1, "days")
        const currentDate = this.$moment(val)
        return !today.isAfter(currentDate) && !currentDate.isAfter(maxAllowedDate)
      })
    }

【讨论】：

【解决方案2】：

试试这个

道具：

    :to-allowed-dates="(val) => toAllowedDates(val, index)"

方法：

toAllowedDates(val, index) {
    const today = this.$moment(this.schedules[index].dayFrom, "YYYY-MM-DD")
    const maxAllowedDate = today.clone().add(1, "days")
    const currentDate = this.$moment(val)
    return !today.isAfter(currentDate) && !currentDate.isAfter(maxAllowedDate)
}

【讨论】：