Vue中如何过滤仅显示最近24小时创建的数据对象？

先纠正核心错误，再给出完整实现：

1. 修正数据结构 #

你提供的示例tasks数组格式有误，每个任务对象应包含所有属性，正确格式如下：

data: {
  tasks: [
    { message: 'Foo', creationDateTime: '03-02-2024 10:30', isRead: false },
    { message: 'Bar', creationDateTime: '04-02-2024 09:15', isRead: true },
    // 更多任务...
  ]
}

2. 实现正确的过滤逻辑 #

创建计算属性filteredTasks，筛选出最近24小时内创建的任务：

computed: {
  filteredTasks() {
    if (!this.tasks || this.tasks.length === 0) return [];
    // 计算24小时前的时间节点
    const twentyFourHoursAgo = moment().subtract(24, 'hours');
    return this.tasks.filter(task => {
      // 注意：根据你的日期格式指定解析规则，避免moment解析错误，示例为'DD-MM-YYYY HH:mm'
      const taskCreateTime = moment(task.creationDateTime, 'DD-MM-YYYY HH:mm');
      // 判断任务创建时间是否在24小时范围内
      return taskCreateTime.isAfter(twentyFourHoursAgo);
    });
  },
  fields() {
    return [
      {
        key: 'message',
        label: 'Message',
        sortable: true,
      },
      {
        key: 'creationDateTime',
        label: 'Date created',
        formatter: date => moment(date, 'DD-MM-YYYY HH:mm').locale(this.$i18n.locale).format('L'),
        sortable: true,
      },
      {
        key: 'isRead',
        label: 'Has been read',
        sortable: true,
      }
    ];
  }
}

3. 更新表格绑定 #

将表格的items绑定到过滤后的数组：

<b-card class="mt-4 mb-4">
  <b-table
    :items="filteredTasks"
    :fields="fields"
    sort-desc
  />
</b-card>

你之前的错误解析 #

• formatter中用subtract：这个操作仅修改了日期的显示值，不会过滤数据，因此所有任务仍会显示。
• 错误的过滤代码：你把filter返回的数组传给moment，这完全不符合逻辑——moment是日期处理工具，不能处理数组；另外过滤条件用了!task.done，但你的数据中根本没有done属性，应基于creationDateTime判断。
• TypeError问题：你代码里写的this.list.filter，但你的数据源是this.tasks，属于变量名写错。

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