Vue遍历数组时如何合并相同age键值对的元素实现聚合渲染

实现方案 #

步骤1：添加分组计算属性 #

在Vue组件的computed配置中新增分组逻辑，将原数组按age字段合并：

computed: {
  groupedByAge() {
    const groupMap = {}
    // 遍历原数组完成分组
    this.array.forEach(item => {
      // 不存在当前age的分组则先初始化
      if (!groupMap[item.age]) {
        groupMap[item.age] = {
          age: item.age,
          nameList: []
        }
      }
      // 将当前项的name加入对应分组
      groupMap[item.age].nameList.push(item.name)
    })
    // 把分组对象转成数组，方便v-for遍历
    // 可选：需要按年龄排序可在末尾加 .sort((a, b) => a.age - b.age)
    return Object.values(groupMap)
  }
}

步骤2：修改模板遍历逻辑 #

直接遍历分组后的计算属性即可，外层渲染年龄，内层遍历同年龄的name列表：

<div v-for="group in groupedByAge" :key="group.age">
  <h5>age: {{ group.age }}</h5>
  <ul>
    <li v-for="(name, idx) in group.nameList" :key="idx">
      {{ name }}
    </li>
  </ul>
</div>

说明 #

• 用age作为外层遍历的key比index更稳定，数组顺序变化时不会触发不必要的DOM重渲染
• 计算属性会自动响应原数组array的变化，只要原数组更新，分组结果会自动同步，无需手动处理

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