Vue中过滤countdowns数组：保留日期晚于当前日期的对象问题

你现在的代码把日期转成DD-MM-YYYY格式的字符串后直接比较，字符串是按字符顺序逐位比较的，这会导致日期判断逻辑完全错误。比如"31-12-2023"和"01-01-2024"，字符串比较会认为前者更大，但实际后者的日期更晚——这种错误的判断逻辑会让过期的倒计时被错误保留，新的倒计时被过滤，最终返回的数组和原数组没有差异。

正确的做法是把日期字符串转成Date对象，或者转成时间戳（毫秒数）进行数值比较，才能保证日期判断的准确性。

修改后的代码示例 #

// 获取当前日期0点0分0秒的时间戳（忽略时分秒，只比较年月日）
const currentDate = () => {
  const date = new Date();
  date.setHours(0, 0, 0, 0);
  return date.getTime();
};

const noneEndedCountdowns = computed(() => {
  const currentTimestamp = currentDate();
  return countdowns.value.filter((item) => {
    // 将DD-MM-YYYY格式的字符串解析为Date对象
    const [day, month, year] = item.date.split('-');
    // 注意：Date构造函数的月份参数是0开始的，所以要减1
    const itemDate = new Date(year, month - 1, day);
    itemDate.setHours(0, 0, 0, 0);
    
    // 比较时间戳：只保留日期不早于当前的倒计时
    return itemDate.getTime() >= currentTimestamp;
  });
});

额外说明 #

• 如果你的item.date格式是YYYY-MM-DD，可以直接用new Date(item.date)解析，不需要拆分字符串和调整月份。
• 调用setHours(0,0,0,0)是为了忽略当天的时分秒，避免出现“当天下午创建的倒计时被误判为过期”的情况。

内容的提问来源于stack exchange，提问作者mofarih-dev