如何在Vue中使用v-for显示分组的项目？

<template>
  <div>
    <!-- 遍历分组 -->
    <div v-for="(group, groupKey) in groupedItems" :key="groupKey">
      <h3>{{ groupKey }}</h3>
      <!-- 遍历每个分组中的项目 -->
      <ul>
        <li v-for="item in group" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    // 原始数据
    const items = ref([
      { id: 1, name: 'Item 1', category: 'A' },
      { id: 2, name: 'Item 2', category: 'B' },
      { id: 3, name: 'Item 3', category: 'A' },
      // ...更多项目
    ]);

    // 计算属性，用于分组
    const groupedItems = computed(() => {
      return items.value.reduce((groups, item) => {
        const key = item.category;
        if (!groups[key]) {
          groups[key] = [];
        }
        groups[key].push(item);
        return groups;
      }, {});
    });

    return {
      groupedItems,
    };
  },
};
</script>