vue 删除两个集合中相同的数组数据
时间: 2024-05-07 10:22:44 浏览: 156
删除一维数组中相同元素
你可以使用 JavaScript 的 `filter` 方法和 `includes` 方法来实现删除两个集合中相同的数组数据。具体步骤如下:
1. 使用 `filter` 方法过滤掉两个数组中相同的元素,得到剩余的元素组成的新数组。
```javascript
const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];
const result = arr1.filter(item => !arr2.includes(item));
console.log(result); // [1, 2]
```
2. 如果你要删除的是对象数组,可以使用对象的某个属性来比较是否相同,例如以下代码删除 `arr1` 和 `arr2` 中 `id` 相同的对象。
```javascript
const arr1 = [{id: 1, name: 'Tom'}, {id: 2, name: 'Jack'}, {id: 3, name: 'Lucy'}];
const arr2 = [{id: 2, name: 'Jack'}, {id: 4, name: 'Bob'}, {id: 5, name: 'Alice'}];
const result = arr1.filter(item1 => !arr2.some(item2 => item1.id === item2.id));
console.log(result); // [{id: 1, name: 'Tom'}, {id: 3, name: 'Lucy'}]
```
在 Vue 中,你可以在组件的 `methods` 中定义一个方法来实现上述逻辑,例如:
```javascript
methods: {
filterData() {
const arr1 = this.data1;
const arr2 = this.data2;
const result = arr1.filter(item => !arr2.includes(item));
this.data1 = result;
}
}
```
当你调用 `filterData` 方法时,会将 `data1` 中和 `data2` 中相同的元素删除,并更新 `data1` 的值。
阅读全文