vue3中查找字典列表中某个元素的值

目录

思路方法

在 Vue 3（或任何 JavaScript 环境）中，如果你有一个数组，其中每个元素都是一个对象（字典列表），并且你想查找具有特定属性值的对象，你可以使用数组的 find 方法。find 方法会返回数组中满足提供的测试函数的第一个元素的值。如果没有找到，则返回 undefined。

代码实现示例

<template>
  <div>
    <p>查找的结果: {{ foundObject }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'jack' },
        { id: 2, name: 'jason' },
        { id: 3, name: 'tom' }
      ],
      searchId: 2, // 我们想查找的对象的 id
      foundObject: null // 存储查找到的对象
    };
  },
  mounted() {
    this.findObjectById();
  },
  methods: {
    findObjectById() {
      // 使用数组的 find 方法查找具有特定 id 的对象
      this.foundObject = this.items.find(item => item.id === this.searchId);
    }
  }
};
</script>

解释说明

• items 是一个对象数组（字典列表），每个对象都有一个 id 和一个 name 属性。
• searchId 是我们想要查找的对象的 id。
• foundObject 将存储查找到的对象（如果有的话）。
• 在 mounted 钩子中，我们调用了 findObjectById 方法来执行查找。
• findObjectById 方法使用 find 方法遍历 items 数组，并返回第一个 id 属性等于 searchId 的对象。
• 如果 searchId 是 2，那么 foundObject 将是 { id: 2, name: ‘jason’ }，如果 searchId 不存在于任何对象中，则 foundObject 将保持为 null（或者在这个例子中，初始值是 null，所以如果没有找到匹配项，它将保持不变）。