仅在 VUE.js v-for 循环中添加唯一项

Question

我正在从 Web ZDB974238714CA8DE634A7CE1D0A8 中拉出 JSON 格式的 object。 这些项目是 NIH 资助赠款，当被拉出时，会为特定研究人员提供每个赠款的历史记录。 我只想为每个单独的project_serial_num呈现最大的award_notice_date 。 我的元素按降序排列，所以如果我执行 v-for 循环，它们都会按降序呈现。 到目前为止，一切都很好。 我的问题是如何只发布每个project_serial_num 的第一个，所以我最终得到来自appl_id 10372234 和 10226173 的信息？ 尝试使用日期进行过滤无济于事，因为日期可能已过期，但如果它是该project_serial_num中的第一个，则需要显示它

             [{
        "appl_id": 10372234,
        "subproject_id": null,
        "fiscal_year": 2022,
        "project_num": "5R01CA261232-02",
        "project_serial_num": "CA261232",
        "award_notice_date": "2022-03-02T12:03:00Z"
    },
    {
        "appl_id": 10226173,
        "subproject_id": null,
        "fiscal_year": 2021,
        "project_num": "5K07CA214839-05",
        "project_serial_num": "CA214839",
        "award_notice_date": "2021-08-05T12:08:00Z"
    },
    {
        "appl_id": 10253554,
        "subproject_id": null,
        "fiscal_year": 2021,
        "project_num": "1R01CA261232-01",
        "project_serial_num": "CA261232",
        "award_notice_date": "2021-03-15T12:03:00Z"
    },
    {
        "appl_id": 9989810,
        "subproject_id": null,
        "fiscal_year": 2020,
        "project_num": "5K07CA214839-04",
        "project_serial_num": "CA214839",
        "award_notice_date": "2020-07-30T12:07:00Z"

    }
]

Answer 1

您应该创建一个计算属性，该属性将使用 Map 来存储值 - 但在向 Map 添加值之前，您将首先检查它是否已经存在并最终跳过重复项。 像这样的东西

computed:
{
  uniqueProjects()
  {
    const result = {};
    this.apiResult.forEach(project =>
    {
      if (!result[project.project_serial_num])
      {
        result[project.project_serial_num] = project;
      }
    });
    return Object.values(result); // we rely on the browser to return values in the order they have been added
  }
}

Answer 2

我使用另一个问题的答案来构建它：

YOUR_ARRAY.filter((value, index, self) => self.findIndex(v => v.project_serial_num === value.project_serial_num) === index);

这将返回一个新数组，其中删除了共享project_serial_num的对象，可以直接将其传递给v-for ，而无需创建新的变量/计算属性。