vue修改 数组对象重复值
时间: 2023-08-05 11:10:37 浏览: 172
如果你想在 Vue 中修改数组对象中的重复值,可以按照以下步骤:
1. 找到数组中所有重复的值
- 可以使用 `reduce()` 方法来创建一个新的数组,只包含重复的值
- 也可以使用 `filter()` 方法来过滤出重复的值
2. 对于每个重复的值,进行修改
- 可以使用 `map()` 方法来修改每个重复的值
- 可以使用 `Vue.set()` 方法来更新 Vue 数据响应式
以下是一个示例代码,演示如何在 Vue 中修改数组对象中的重复值:
```vue
<template>
<div>
<ul>
<li v-for="(item, index) in modifiedArr" :key="index">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{ id: 1, name: "John" },
{ id: 2, name: "Jane" },
{ id: 3, name: "John" },
{ id: 4, name: "Peter" },
{ id: 5, name: "Jane" },
],
};
},
computed: {
duplicates() {
return this.arr.reduce((acc, curr, index, array) => {
if (array.findIndex((item) => item.name === curr.name) !== index && acc.indexOf(curr.name) === -1) {
acc.push(curr.name);
}
return acc;
}, []);
},
modifiedArr() {
return this.arr.map((item) => {
if (this.duplicates.indexOf(item.name) !== -1) {
const newItem = { ...item, name: `${item.name} (modified)` };
Vue.set(this.arr, this.arr.indexOf(item), newItem);
return newItem;
}
return item;
});
},
},
};
</script>
```
在上面的示例中,我们使用 `computed` 计算属性来获取修改后的数组对象。首先,我们使用 `reduce()` 方法找到了所有重复的值,然后使用 `map()` 方法对每个重复的值进行了修改。在修改的过程中,我们使用了 `Vue.set()` 方法来更新 Vue 数据响应式。最终输出的结果是:
```html
<div>
<ul>
<li>John</li>
<li>Jane</li>
<li>John (modified)</li>
<li>Peter</li>
<li>Jane (modified)</li>
</ul>
</div>
```
阅读全文