尝试对比日期列表与当前日期却始终返回false的问题排查

核心错误点 #

• 变量名拼写错误：计算属性里的this.listOfdDates是笔误，多了一个字母d，实际应该是this.listOfDates，导致调用.some时是在undefined上执行，直接返回false。
• .some回调逻辑完全错误：当前回调date => date.listOfDates只是检查每个date对象是否包含listOfDates属性，完全没有做日期比较的逻辑，这和你的需求完全不符。
• 模板判断逻辑错误：datesBiggerOrCurrentDate >= currentDate是无效判断——计算属性应该返回布尔值（是否存在符合条件的日期），不需要再和currentDate做比较。
• 字符串比较日期的陷阱：你把currentDate格式化为字符串'L'，不同地区的日期格式（如MM/DD/YYYY和DD/MM/YYYY）会导致字符串比较结果完全错误，应该用日期对象来做比较。

修正后的代码 #

Script部分

data() {
  return {
    // 保留moment对象而非格式化字符串，避免比较误差
    currentDate: moment().locale(this.$i18n.locale),
    listOfDates: [],
  };
},

computed: {
  hasUpcomingOrCurrentDates() {
    // 先判断列表非空，再检查是否存在符合条件的日期
    return this.listOfDates.length > 0 && this.listOfDates.some(dateStr => {
      // 将数据库返回的日期字符串转为moment对象，注意格式要和数据库返回的匹配
      const itemDate = moment(dateStr, 'YYYY-MM-DD'); // 若数据库返回的是其他格式，替换此处的格式参数
      // 用moment内置方法判断日期是否大于等于当前日期（按天粒度比较）
      return itemDate.isSameOrAfter(this.currentDate, 'day');
    });
  },
},

模板部分

<div v-if="hasUpcomingOrCurrentDates" class="alert alert-warning">
  <i class="fas fa-exclamation-circle text-danger mr-1"></i>
  <strong class="text-danger">Warning!</strong> {{ 'Some text' }}
</div>

补充说明 #

如果数据库返回的日期格式不是YYYY-MM-DD，需要调整moment(dateStr, '你的日期格式')里的第二个参数，确保moment能正确解析日期字符串。

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