Vue 3 中按照某个字段将数组分成多个数组

方法一:使用 reduce 方法

javascript 复制代码
const originalArray = [
  { id: 1, category: 'A', name: 'Item 1' },
  { id: 2, category: 'B', name: 'Item 2' },
  { id: 3, category: 'A', name: 'Item 3' },
  { id: 4, category: 'C', name: 'Item 4' },
  { id: 5, category: 'B', name: 'Item 5' },
];

const groupedByCategory = originalArray.reduce((acc, item) => {
  const key = item.category;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(item);
  return acc;
}, {});

// 结果是一个对象,键是分类,值是该分类下的数组
console.log(groupedByCategory);

方法二:使用 lodash 的 groupBy 方法

如果你项目中使用了 lodash,可以使用它的 groupBy 方法:

javascript 复制代码
import { groupBy } from 'lodash';

const groupedByCategory = groupBy(originalArray, 'category');
console.log(groupedByCategory);

方法三:在 Vue 3 组件中使用计算属性

javascript 复制代码
import { computed } from 'vue';

export default {
  setup() {
    const originalArray = [
      { id: 1, category: 'A', name: 'Item 1' },
      { id: 2, category: 'B', name: 'Item 2' },
      // ...其他数据
    ];

    const groupedByCategory = computed(() => {
      return originalArray.reduce((acc, item) => {
        const key = item.category;
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(item);
        return acc;
      }, {});
    });

    return {
      groupedByCategory
    };
  }
};

方法四:转换为数组的数组形式

javascript 复制代码
const groupedArray = Object.values(
  originalArray.reduce((acc, item) => {
    const key = item.category;
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(item);
    return acc;
  }, {})
);

console.log(groupedArray);
// 输出: [
//   [{ id: 1, category: 'A', name: 'Item 1' }, { id: 3, category: 'A', name: 'Item 3' }],
//   [{ id: 2, category: 'B', name: 'Item 2' }, { id: 5, category: 'B', name: 'Item 5' }],
//   [{ id: 4, category: 'C', name: 'Item 4' }]
// ]

在模板中使用

html 复制代码
<template>
  <div v-for="(group, category) in groupedByCategory" :key="category">
    <h3>Category: {{ category }}</h3>
    <ul>
      <li v-for="item in group" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
相关推荐
程序员爱钓鱼2 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子4 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆4 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了5 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆10 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆11 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆11 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆12 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er19 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子20 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript