Vue日期选择器disabledDate中服务器返回日期数组为空问题

看起来你遇到的核心问题是响应式数据追踪时机和组件初始化逻辑的时序冲突，我来帮你拆解清楚并给出修复方案：

为什么会出现这个情况？ #

1. staffAvailableDays未被标记为响应式数据：在Vue类组件中，直接在constructor里初始化的属性不会被Vue的响应式系统自动追踪。这就导致当你通过异步请求更新staffAvailableDays后，disabledDate方法无法感知到数组的变化，仍然沿用初始化时的空数组引用。
2. datePickerOptions初始化时机过早：你在constructor里就创建了datePickerOptions，此时staffAvailableDays是空数组，而且由于响应式的缺失，后续数组更新也无法触发disabledDate的重新计算。

修复步骤 #

1. 标记staffAvailableDays为响应式数据 #

如果你的项目使用了vue-class-component，需要用@Data()装饰器来声明响应式属性（适配Vue 2类组件的常规写法）：

import { Component, Prop, Data } from 'vue-property-decorator'; // 确保引入装饰器

export default class StaffAllocation extends Mixins<BaseCrudMixin>(BaseCrudMixin) { 
  @Data() staffAvailableDays: Date[] = []; // 用@Data标记为响应式
  datePickerOptions: any; 
  @Prop(Number) eventId!: number; 

  constructor() { 
    super(); // 必须调用父类构造函数，确保Mixins逻辑正常运行
    // 此处不再初始化datePickerOptions，移至后续环节
  }
}

2. 用计算属性生成datePickerOptions #

将datePickerOptions改为计算属性，这样每当staffAvailableDays更新时，计算属性会自动重新生成选项，确保disabledDate能拿到最新的数组：

import { Component, Prop, Data, Computed } from 'vue-property-decorator';

export default class StaffAllocation extends Mixins<BaseCrudMixin>(BaseCrudMixin) { 
  @Data() staffAvailableDays: Date[] = []; 
  @Prop(Number) eventId!: number; 

  @Computed()
  get datePickerOptions() {
    return {
      disabledDate: (currentDate: Date) => {
        // 优化判断逻辑：用some替代findIndex，语义更清晰
        return !this.staffAvailableDays.some(item => item.getTime() === currentDate.getTime());
      }
    };
  }

  getStaffAvailability(){ 
    // 改用箭头函数，无需额外存x=this，直接绑定组件实例的this
    this.$http.get(`${this.weeklyAvailabilityUrl}GetAvailableDaysForStaff/${this.entity.staffId}`) 
      .then((event: any) => { 
        this.staffAvailableDays = event.body; 
      }); 
  }
}

3. 可选：优化日期判断性能（针对大数据量场景） #

如果staffAvailableDays数组元素较多，每次调用disabledDate都遍历数组会影响性能，可以在数组更新时把时间戳存到Set里，提升判断效率：

@Data() staffAvailableTimestamps: Set<number> = new Set();

// 在异步请求更新数组后同步更新Set
getStaffAvailability(){ 
  this.$http.get(`${this.weeklyAvailabilityUrl}GetAvailableDaysForStaff/${this.entity.staffId}`) 
    .then((event: any) => { 
      this.staffAvailableDays = event.body; 
      this.staffAvailableTimestamps = new Set(event.body.map((date: Date) => date.getTime()));
    }); 
}

// 修改disabledDate的判断逻辑
@Computed()
get datePickerOptions() {
  return {
    disabledDate: (currentDate: Date) => {
      return !this.staffAvailableTimestamps.has(currentDate.getTime());
    }
  };
}

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