Vue.js v-for循环中仅渲染唯一project_serial_num的首项数据

因为你的数据已经按award_notice_date降序排列，要保留每个project_serial_num的第一条记录，最直接的方式是先预处理数据，过滤出每个唯一编号的首个条目，再用v-for渲染处理后的数组。

方法一：用计算属性预处理数据（推荐） #

在Vue组件里定义计算属性，自动过滤重复的项目编号：

export default {
  data() {
    return {
      originalProjects: [
        { "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" }
      ]
    }
  },
  computed: {
    uniqueProjects() {
      const seenSerials = new Set();
      // 过滤出每个project_serial_num的第一个出现项
      return this.originalProjects.filter(project => {
        if (!seenSerials.has(project.project_serial_num)) {
          seenSerials.add(project.project_serial_num);
          return true;
        }
        return false;
      });
    }
  }
}

然后在模板里渲染处理后的数组：

<div v-for="project in uniqueProjects" :key="project.appl_id">
  <h3>{{ project.project_num }}</h3>
  <p>申请ID: {{ project.appl_id }}</p>
  <p>资助年份: {{ project.fiscal_year }}</p>
  <p>通知日期: {{ project.award_notice_date }}</p>
</div>

方法二：API获取数据后直接处理 #

如果是从接口拿到数据后立即处理，也可以在请求回调里完成过滤：

// 假设用fetch请求数据
fetch('你的API地址')
  .then(res => res.json())
  .then(rawData => {
    const seenSerials = new Set();
    this.uniqueProjects = rawData.filter(project => {
      if (!seenSerials.has(project.project_serial_num)) {
        seenSerials.add(project.project_serial_num);
        return true;
      }
      return false;
    });
  });

为什么不推荐在v-for里加v-if？ #

如果直接在v-for里用v-if判断是否是当前serial的第一个条目，会先循环所有数据再逐一判断，数据量大时性能很差。预处理只需要遍历一次数据，效率高得多。

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