如何在Vue.js中匹配嵌套技能数组筛选符合条件的用户？

我们数据库中的每位用户都拥有特定技能，所有技能均有唯一ID。需筛选出具备目标技能的用户（如筛选所有保洁员）。我们使用Vue.js，筛选逻辑写在计算属性中，现有代码如下：

filteredResults() {
  return this.user.filter(user => this.skills.find(skill => user.skills.id == skills.id));
}

问题出在user.skills.id，我想遍历用户所有技能的ID，但该语法无效。如何筛选出技能ID与下拉选中技能ID匹配的用户？

数据结构如下：

Users: [
  {
    name: "Tom",
    id: "12345",
    skills: [
      {
        title: "Programmer",
        id: "12345678"
      },
      {
        title: "Janitor",
        id: "6788012"
      }
    ]
  },
  {
    name: "Bill",
    id: "u0wb0fu3b",
    skills: [
      {
        title: "Landscaper",
        id: "234525"
      },
      {
        title: "Janitor",
        id: "6788012"
      }
    ]
  }
]
SearchedSkills: [
  {
      title: "Landscaper",
      id: "234525"
  }
]

（注：修正了原数据结构中的语法错误，数组内不能使用user1:这类键名，统一为对象元素）

你需要修正两个核心问题：一是正确遍历用户的技能数组（user.skills是数组，不能直接取.id）；二是高效判断用户技能是否与目标技能匹配。

多目标技能筛选（对应SearchedSkills数组） #

如果是多选下拉，需要匹配所有选中技能中的任意一个，可使用以下代码：

filteredResults() {
  // 提取所有目标技能的ID，优化后续判断效率
  const targetSkillIds = this.SearchedSkills.map(skill => skill.id);
  // 过滤用户列表：只要用户有任意一个技能ID在目标列表中就保留
  return this.Users.filter(user => {
    return user.skills.some(skill => targetSkillIds.includes(skill.id));
  });
}

单目标技能筛选（单选下拉场景） #

如果是单选下拉，绑定了selectedSkill变量，可简化代码：

filteredResults() {
  // 未选中技能时返回全部用户
  if (!this.selectedSkill) return this.Users;
  return this.Users.filter(user => {
    // 检查用户技能中是否存在与选中技能ID匹配的项
    return user.skills.some(skill => skill.id === this.selectedSkill.id);
  });
}

原代码错误说明 #

1. user.skills.id语法错误：user.skills是数组类型，必须遍历数组内的每个技能对象才能获取id，some、find等数组方法可实现遍历判断。
2. 变量名与逻辑问题：原代码中this.skills应对应你的SearchedSkills，且find返回匹配对象而非布尔值，some更适合做存在性判断（只要有一个匹配就返回true）。

内容的提问来源于stack exchange，提问作者Greg Fielding