vue3中查找字典列表中某个元素的值对应的列表索引值

目录

思路方法

要获取字典列表中某个元素的值对应的列表索引值，可以使用数组的 findIndex 方法。这个方法返回数组中满足提供的测试函数的第一个元素的索引。如果没有找到，则返回 -1。

代码实现示例

<template><div><p>查找的结果: {{ foundObject }}</p><p>索引值: {{ index }}</p></div>
</template><script>
export default {data() {return {items: [{ id: 1, name: 'jack' },{ id: 2, name: 'jason' },{ id: 3, name: 'tom' }],searchId: 2, // 我们想查找的对象的 idfoundObject: null, // 存储查找到的对象index: -1 // 存储查找到的对象的索引值};},mounted() {this.findObjectAndIndexById();},methods: {findObjectAndIndexById() {// 首先使用 findIndex 方法查找索引值this.index = this.items.findIndex(item => item.id === this.searchId);// 如果找到了索引值，则使用索引值从数组中获取对象if (this.index !== -1) {this.foundObject = this.items[this.index];} else {// 如果没有找到，则重置 foundObjectthis.foundObject = null;}}}
};
</script>

解释说明

• index 变量用于存储查找到的对象的索引值。
• findObjectAndIndexById 方法首先使用 findIndex 方法查找 items 数组中满足 id 等于 searchId 的对象的索引值，并将其存储在 index 中。
• 如果 index 不等于 -1（表示找到了对象），则使用 index 从 items 数组中获取对应的对象，并将其存储在 foundObject 中。
• 如果 index 等于 -1（表示没有找到对象），则将 foundObject 重置为 null。