vue3 通过id 过滤出数组对象

在 Vue 3 中，如果你想要通过某个 id 来过滤出一个数组中的对象，你可以使用 JavaScript 的数组方法，比如 find() 或 filter()。这些方法允许你根据提供的条件来搜索数组并返回匹配的元素。

下面是一个示例，展示了如何在 Vue 3 的 <script setup> 中通过 id 来过滤数组对象：

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} (ID: {{ item.id }})
      </li>
    </ul>
    <input v-model="searchId" placeholder="Enter ID to filter" />
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
// 定义一个数组，包含多个对象
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  // ... 其他对象
]);
 
// 定义一个响应式变量来存储要搜索的 ID
const searchId = ref('');
 
// 使用 computed 来根据 searchId 过滤 items 数组
const filteredItems = computed(() => {
  const idToFind = parseInt(searchId.value, 10); // 将搜索 ID 转换为整数
  return items.value.filter(item => item.id === idToFind);
});
</script>

在这个例子中，我们有一个 items 数组，它包含了多个对象，每个对象都有一个 id 和一个 name。我们还定义了一个 searchId 变量，它绑定到一个输入框上，允许用户输入要搜索的 ID。

我们使用 computed 属性来创建一个 filteredItems 数组，它根据 searchId 的值来过滤 items 数组。在 computed 函数内部，我们将 searchId 的值转换为整数（假设 ID 是整数），然后使用 filter() 方法来返回所有 id 匹配的对象。

注意，filter() 方法返回一个新数组，它包含所有通过提供的测试函数的元素。在这个例子中，测试函数是 item => item.id === idToFind，它检查每个对象的 id 是否等于要搜索的 ID。

最后，在模板中，我们使用 v-for 指令来遍历 filteredItems 数组，并显示每个对象的 name 和 id。由于 filteredItems 是一个计算属性，它会根据 searchId 的变化自动更新，从而更新显示的结果。