Vue.js -如果数组中的对象具有相同的标题，则显示更多对象

<template>
  <div>
    <div v-for="(item, index) in mergedObjects" :key="index">
      <h2>{{ item.title }}</h2>
      <p>数量：{{ item.count }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      objects: [
        { title: '标题1', content: '内容1' },
        { title: '标题1', content: '内容2' },
        { title: '标题2', content: '内容3' },
        { title: '标题3', content: '内容4' },
        { title: '标题3', content: '内容5' },
      ],
    };
  },
  computed: {
    mergedObjects() {
      const merged = [];
      let prevTitle = null;
      let count = 0;

      for (const obj of this.objects) {
        if (obj.title === prevTitle) {
          merged[count - 1].count++;
        } else {
          merged.push({ ...obj, count: 1 });
          prevTitle = obj.title;
          count++;
        }
      }

      return merged;
    },
  },
};
</script>