Vue3中使用 filter 方法通过 id 删除数组中的指定对象

---

一、前言

在 Vue3 中，我们经常需要处理数据并进行相应操作，比如删除数组中的特定对象。在这篇文章中，我们将学习如何使用 filter 方法和响应式变量来实现这一目标。

首先，让我们看一下如何利用 ref 来创建响应式数组，以及如何使用 filter 方法来删除特定 id 对应的对象。以下是一个简单的示例：

1、示例

import { ref } from 'vue';

// 创建一个包含项目列表的响应式数组
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
]);

// 定义要删除的对象的 id
const targetId = 2;

// 使用 filter 方法删除特定 id 对应的对象
items.value = items.value.filter(item => item.id !== targetId);

在上述示例中，我们使用了 ref 来创建一个响应式数组 items，然后通过 filter 方法删除了 id 为 targetId 的对象。

接下来，让我们结合 Vue 3 的模板语法来展示最终的效果：

2、案例

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

<script setup>
import { ref } from 'vue';

// 创建一个包含项目列表的响应式数组
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
]);

// 定义要删除的对象的 id
const targetId = 2;

// 使用 filter 方法删除特定 id 对应的对象
items.value = items.value.filter(item => item.id !== targetId);
</script>

以上代码演示了如何在 Vue 3 中使用 filter 方法通过 id 删除数组中的指定对象，并在模板中展示最终的结果。

希望本文能够帮助您更好地理解如何在 Vue 3 中使用 filter 方法来处理数组数据。如果您有任何疑问或需要进一步帮助，请随时告诉我。