Vue.js中搜索框和下拉框联合筛选数组功能失效如何解决？

你的代码存在2个核心错误导致筛选不生效，修改即可完成需求： #

核心错误点 #

• 模板渲染用了原始未筛选的users数组，你写的筛选逻辑全存在计算属性sourceInfo里，但根本没在模板里用这个计算属性
• 计算属性里写错了原始数组的变量名：你data里定义的用户数组是users，但计算属性里写的是this.userList，这个变量不存在，直接导致计算属性运行报错

具体修改代码 #

模板部分修改 #

把用户循环的数据源从users换成计算属性sourceInfo：

<!-- 原来的代码 -->
<!-- <div v-for="user in users" :key="user.id"> -->
<!-- 修改后 -->
<div v-for="user in sourceInfo" :key="user.id">
  {{ user.name }}
  <!-- 补充说明：这里如果你的lists是每个用户独有的数据，建议改成过滤当前用户对应的列表，否则会所有用户都循环全量的lists数据，示例： -->
  <!-- <div v-for="list in lists.filter(item => item.userId === user.id)" :key="list.id"> -->
  <div v-for="list in lists" :key="list.id">
    {{ list.pan }}
  </div>
</div>

JS部分修改 #

把计算属性里的this.userList改成this.users：

computed: {
  sourceInfo() {
    function compare(a, b) {
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    }
    // 原来的代码是this.userList，修改为this.users
    const res = this.users
      .filter((user) => {
        return user.name.toLowerCase().includes(this.search.toLowerCase());
      })
      .sort(compare);
    if (this.selectNum) {
      return res.filter((user) => user.status === this.selectNum);
    }
    return res;
  },
}

修改后就可以正常触发搜索和下拉筛选了，计算属性会自动监听search和selectNum的变化实时更新筛选结果。

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