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。