Vue中对象数组查询匹配问题排查与代码优化

问题原因 #

1. 数据绑定错误：你给app-people组件绑定的是原始people数组，而非过滤后的getUserInput计算属性，所以输入查询词后页面显示的还是原数据，看不到过滤效果。
2. 多余事件绑定：输入框用了v-model="query"，已经能自动同步输入值到query变量，再绑定@input="getUserInput.get"完全没必要——computed属性会自动依赖query和people的变化重新计算，不需要手动调用get方法。
3. 数组判断逻辑错误：mobileNumber.filter()和hobbies.filter()返回的是数组，哪怕没有匹配项，空数组在逻辑判断里也是true，导致所有数据都会被保留。应该用some()方法，它只要数组里有一项匹配就返回true，否则返回false，逻辑才正确。

修正与优化后的代码 #

模板部分 #

<template>
  <div id="app">
    <input type="text" v-model="query">
    <app-people :people="getUserInput"></app-people>
  </div>
</template>

脚本部分（简洁版） #

computed: {
  getUserInput() {
    // 统一转小写，实现大小写不敏感匹配（不需要可移除）
    const lowerQuery = this.query.toLowerCase();
    return this.people.filter(person => {
      // 检查字符串字段
      const matchesBasic = person.name.toLowerCase().includes(lowerQuery) || 
                          person.gender.toLowerCase().includes(lowerQuery);
      // 检查数组字段
      const matchesMobile = person.mobileNumber.some(num => num.includes(lowerQuery));
      const matchesHobby = person.hobbies.some(hobby => hobby.toLowerCase().includes(lowerQuery));
      
      return matchesBasic || matchesMobile || matchesHobby;
    });
  }
}

进一步精简写法 #

如果想让代码更简洁，可以把需要检查的字段整理成数组统一判断：

computed: {
  getUserInput() {
    const lowerQuery = this.query.toLowerCase();
    return this.people.filter(person => {
      const checkItems = [
        () => person.name.toLowerCase().includes(lowerQuery),
        () => person.gender.toLowerCase().includes(lowerQuery),
        () => person.mobileNumber.some(num => num.includes(lowerQuery)),
        () => person.hobbies.some(hobby => hobby.toLowerCase().includes(lowerQuery))
      ];
      // 只要有一项匹配就保留该条目
      return checkItems.some(check => check());
    });
  }
}

额外说明 #

• toLowerCase()是为了实现大小写不敏感匹配，若业务不需要精确区分大小写，可以去掉。
• some()方法比filter()更适合这里的场景：找到第一个匹配项就停止遍历，性能更优。

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