Vue计算属性中基于日期选择器生成日期数组的问题

需要实现以下日期展示逻辑：

• 未设置起止日期时，默认显示11天的日期（从当前日期开始）
• 当通过日期选择器设置了起止日期后，根据日期差值生成对应数量的日期（例如选择今日和3天后的日期，需显示4天的日期）

当前默认显示11天的功能正常，但选择日期后无法触发对应日期范围的生成，推测是computed计算属性中无法正确获取日期选择器的值（硬编码数值时功能正常），需要修改代码实现需求。

原代码存在几个关键问题：

1. 没必要通过pendingStartDate/pendingEndDate存储事件对象，输入框已经通过v-model绑定了startDateModel/endDateModel，直接使用这两个响应式变量即可
2. dates计算属性中的错误：
   • 调用了不存在的Date.startDate()方法，应该使用已定义的startDate变量
   • 数组生成时错误固定使用Array(11)，应该根据日期差值动态生成数组长度
   • toISOString().slice(0,days)参数错误，应该用slice(0,10)来获取YYYY-MM-DD格式的日期

JavaScript代码 #

var vm = new Vue({
  data: {
    startDateModel: '',
    endDateModel: ''
  },
  computed: {
    dates() {
      // 当起止日期都已设置时，生成日期范围内的数组
      if (this.startDateModel && this.endDateModel) {
        const startDate = new Date(this.startDateModel);
        const endDate = new Date(this.endDateModel);
        // 计算日期差值（包含起止日期，所以要+1）
        const diffInDays = Math.ceil(Math.abs(endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
        
        return Array.from(Array(diffInDays), (_, i) => {
          const currentDate = new Date(startDate);
          currentDate.setDate(startDate.getDate() + i);
          return currentDate.toISOString().slice(0, 10);
        });
      } else {
        // 未设置日期时，默认生成11天的日期（从当前日期开始）
        return Array.from(Array(11), (_, i) => {
          const currentDate = new Date(Date.now());
          currentDate.setDate(currentDate.getDate() + i);
          return currentDate.toISOString().slice(0, 10);
        });
      }
    }
  }
});

HTML代码 #

<div style="position:relative !important;">
  <input
    v-model="startDateModel"
    type="text"
    data-uk-datepicker="{minDate:'{{date_format(new DateTime('tomorrow'),'Y-m-d')}}', format:'YYYY-MM-DD'}"
  >
</div>
<div style="position: relative !important;">
  <input 
    v-model="endDateModel"
    type="text"
    data-uk-datepicker="{minDate:'{{date_format(new DateTime('tomorrow'),'Y-m-d')}}', format:'YYYY-MM-DD'}"
  >
</div>

<th v-for="date in dates" :key="date">@{{ date }}</th>

• 移除了冗余的pendingStartDate/pendingEndDate变量和对应的getStartDate/getEndingDate方法，直接利用v-model绑定的响应式变量
• 修正了日期数组生成逻辑：通过setDate方法正确计算每一天的日期，避免直接用时间戳累加可能出现的时区问题
• 计算日期差值时加1，确保包含起止日期（例如今日到3天后的日期，差值为3，加1后得到4天）
• 统一使用slice(0,10)获取标准的YYYY-MM-DD格式日期

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