vue 对象数组根据id查找并删除

可以通过以下代码实现：

let index = arr.findIndex(item => item.id === id);
if (index !== -1) {
  arr.splice(index, 1);
}

其中，arr 为需要进行查找和删除的对象数组，id 为需要查找的 id 值，findIndex 方法会返回 id 值在数组中的下标，如果没找到则返回 -1。如果找到了，可以使用 splice 方法将该元素从数组中删除。

相关问题

Vue在数组对象中查找值并取出

在Vue中，可以使用`Array.prototype.find()`方法来查找数组中符合条件的对象，并取出该对象的值。与上面Javascript的方法类似，不同的是在Vue中通常会将数据存储在组件的`data`属性中，因此需要使用`this`关键字来获取数组对象。假设在Vue组件中有一个数组对象`list`，其中包含多个对象，每个对象有多个属性，可以使用以下方式来查找符合条件的对象，并取出该对象的值：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }} - {{ item.age }}</li>
    </ul>
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "张三", age: 18 },
        { id: 2, name: "李四", age: 20 },
        { id: 3, name: "王五", age: 22 }
      ],
      name: ""
    }
  },
  mounted() {
    // 查找年龄为20的对象，并取出该对象的姓名
    var item = this.list.find(function(item) {
      return item.age === 20;
    });
    this.name = item.name;
  }
}
</script>

在上面的代码中，我们将数组对象`list`存储在组件的`data`属性中，使用`v-for`指令遍历数组对象并在页面中显示出来。在`mounted()`生命周期钩子中，使用`this.list.find()`方法查找年龄为20的对象，并将该对象赋值给变量`item`，最后使用`this.name`将该对象的`name`属性的值赋值给组件的`name`属性，用于在页面中显示出来。

vue 数组对象根据id去重

在Vue中，如果需要根据对象数组中的某个属性（例如id）去除重复项，可以使用JavaScript的`Array.prototype.filter`和`Array.prototype.find`方法来实现。这里是一个基本的实现步骤：

1. 使用`filter`方法遍历数组，对于数组中的每个元素，检查是否存在与当前元素具有相同`id`的元素。
2. 利用`find`方法查找当前元素的`id`是否已经被包含在新的数组中。
3. 如果当前元素的`id`尚未被包含，则将其添加到结果数组中。

下面是一个示例代码：

let items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 1, name: 'Item 1' },
  { id: 3, name: 'Item 3' },
  { id: 2, name: 'Item 2' }
];

function removeDuplicatesById(items) {
  return items.filter((item, index, array) => {
    return index === array.findIndex((t) => (
      t.id === item.id
    ));
  });
}

let uniqueItems = removeDuplicatesById(items);
console.log(uniqueItems);

这段代码将输出去重后的数组，每个对象的`id`都是唯一的。