Vue3如何按照某个字段将数组分成多个数组
作者：滿
这篇文章主要介绍了Vue3如何按照某个字段将数组分成多个数组的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
方法一：使用 reduce 方法
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 方法：
import { groupBy } from 'lodash';
const groupedByCategory = groupBy(originalArray, 'category');
console.log(groupedByCategory);方法三：在 Vue 3 组件中使用计算属性
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
};
}
};方法四：转换为数组的数组形式
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' }]
// ]在模板中使用
<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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。