挂载后设置Vuetify Datepicker allowed-dates日期范围的方法

当前通过如下方式向v-date-picker组件传入允许选择的日期数组：

原有实现代码 #

HTML部分：

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

JavaScript部分：

disabledDates: val => this.bookingDates.indexOf(val) === -1,

存在问题 #

disabledDates方法会在Datepicker渲染阶段（组件挂载完成前）被调用，此时this.bookingDates尚未初始化，会导致逻辑运行异常。需求为等待this.bookingDates数组数据填充完成后，再渲染Datepicker组件。

有两种可落地的实现方式，可根据业务场景选择：

• 方式1：通过v-if控制组件渲染时机（最贴合需求）
  给日期选择器组件加v-if判断，只有bookingDates完成初始化、数据填充完毕后才渲染组件，从根源上避免提前执行日期校验逻辑的问题。修改后的HTML代码如下：

  <v-date-picker
    v-if="Array.isArray(bookingDates)"
    v-model="dates"
    :allowed-dates="disabledDates"
  >
  </v-date-picker>
  

  判断条件可根据自身初始化逻辑调整：如果bookingDates初始值为null，可将判断条件写为v-if="bookingDates"；如果需要等接口返回的有效日期列表加载完成再渲染，可额外加加载状态的判断，比如v-if="!bookingLoading && Array.isArray(bookingDates)"。
• 方式2：给校验逻辑加空值兜底（适合需要提前渲染组件的场景）
  如果不希望延迟渲染组件，可以直接修改disabledDates的逻辑，增加存在性判断，在bookingDates未初始化时返回符合业务预期的默认值，避免报错。修改后的JavaScript代码如下：

  disabledDates: val => {
    // 未初始化时的兜底逻辑，示例为默认禁止选择所有日期，可按需调整返回值
    if (!Array.isArray(this.bookingDates)) return false
    return this.bookingDates.indexOf(val) === -1
  }
  

  如果需要在数据加载过程中给用户提示，可以搭配组件的loading状态展示加载效果，不需要销毁重建组件。

内容的提问来源于stack exchange，提问作者Katz