如何在 Vue.js 中高效筛选具有指定技能 ID 的用户

本文详解如何在 vue.js 的 computed 属性中正确实现嵌套数组匹配——通过 some() 检查用户技能列表中是否存在与目标技能 id 一致的项避免语法错误与性能陷阱。 本文详解如何在 vue.js 的 computed 属性中正确实现嵌套数组匹配——通过 some() 检查用户技能列表中是否存在与目标技能 id 一致的项避免语法错误与性能陷阱。在 Vue.js 应用中当需要基于嵌套数组如用户拥有的多个技能进行动态过滤时常见的误区是误用点号访问语法如 user.skills.id而忽略了 skills 是一个对象数组需遍历才能访问每个子项的 id。正确的做法是使用数组方法 some() ——它语义清晰、性能良好且天然适配 computed 属性的响应式依赖追踪。以下是一个健壮、可维护的 filteredResults 计算属性实现computed: { filteredResults() { // 若未选择搜索技能返回全部用户或空数组按业务需求调整 if (!this.selectedSkill || !this.selectedSkill.id) { return this.users; } const targetId this.selectedSkill.id; return this.users.filter(user Array.isArray(user.skills) user.skills.some(skill skill.id targetId) ); }}? 关键要点说明 user.skills.some(skill skill.id targetId) 替代了错误的 user.skills.id 写法精准表达「只要任一技能 ID 匹配即保留该用户」 前置 Array.isArray(user.skills) 安全校验防止因某用户 skills 字段缺失或非数组类型导致运行时错误 使用 this.selectedSkill而非硬编码 SearchedSkills[0]符合 Vue 响应式设计原则确保下拉框选中变化时自动重计算 整个逻辑纯函数式、无副作用完美契合 computed 的设计初衷。?? 注意事项 Mokker AI AI产品图添加背景