在 Vue3 中,你可以使用 Map
对从后端返回的数组结果进行去重。假设你有一个数组,其中包含多个对象,每个对象都有一个唯一的 id
属性。以下是一个示例,展示如何使用 Map
去重:
<script setup>
import { ref, onMounted } from 'vue';
const uniqueResults = ref([]);
onMounted(() => {
const data = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' },
{ id: 3, name: 'Charlie' },
{ id: 2, name: 'Bob' }
];
// 使用Map根据id去重
const map = new Map();
data.forEach(item => {
if (!map.has(item.id)) {
map.set(item.id, item);
}
});
// 将Map转换为数组
uniqueResults.value = Array.from(map.values());
});
</script>
<template>
<div>
<h2>去重后的结果:</h2>
<ul>
<li v-for="item in uniqueResults" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
在这个例子中:
- 我们定义了一个
data
数组,包含多个可能重复的对象。 - 使用
Map
根据id
属性去重。Map
的键是对象的id
,值是对应的对象。 - 最后将
Map
的值转换为数组,并将去重后的结果存储在uniqueResults
中。
在模板部分,v-for
循环遍历 uniqueResults
,并显示去重后的结果。