在vue模板的列表中显示分组后获取的数据

<template>
  <div>
    <div v-for="(group, index) in groupedData" :key="index">
      <h2>{{ group.category }}</h2>
      <ul>
        <li v-for="item in group.items" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 从后端获取的原始数据
    };
  },
  computed: {
    groupedData() {
      // 对数据进行分组
      const grouped = this.data.reduce((result, item) => {
        const category = item.category; // 假设数据中有一个category属性
        if (!result[category]) {
          result[category] = [];
        }
        result[category].push(item);
        return result;
      }, {});
      
      // 将分组后的数据转换为数组形式
      return Object.keys(grouped).map((category) => ({
        category,
        items: grouped[category],
      }));
    },
  },
  created() {
    // 发起异步请求，获取数据
    // 这里假设使用axios库发送请求，并将获取的数据保存在this.data中
    axios.get('/api/data').then((response) => {
      this.data = response.data;
    });
  },
};
</script>