Vue实现列表按下拉选项搜索时无法按ID筛选、选中项显示异常问题

问题根因 #

• ID搜索失效：代码中对数字类型的item.id直接调用字符串专属的includes()方法，触发运行时错误，导致整个筛选计算属性执行中断，筛选逻辑完全无法生效。同时下拉选项未绑定显式value属性，会造成v-model获取的选中值与筛选判断的字符串匹配不一致。
• 输入时选中项丢失：ID筛选代码抛出的运行时错误会中断Vue响应式渲染流程，导致绑定在下拉框的selected变量被意外重置为初始空值，触发下拉框自动回退到占位提示项，表现为开始输入后选中状态消失。
• 空搜索内容判断逻辑不严谨：现有判断未做空值前置校验，必须同时满足字段选中、搜索内容非空才触发筛选，空值分支缺少类型兼容处理，容易出现边界逻辑异常。

具体修复操作 #

1. 为下拉选项绑定与筛选判断完全匹配的显式value值，避免HTML默认取选项文本作为value的兼容问题：

   <select v-model="selected">
     <option disabled value="">Search by</option>
     <option value="charactername">Name</option>
     <option value="episode">Episode</option>
     <option value="id">Id</option>
   </select>
   

2. 重构filteredList计算属性，增加空值前置判断，同时对不同字段的类型做兼容处理：

   filteredList() {
     // 搜索内容为空、未选择搜索字段时，直接返回全量列表
     if (!this.searchQuery.trim() || !this.selected) {
       return this.list
     }
     const query = this.searchQuery.toLowerCase()
     // 按选中字段分支处理筛选逻辑
     switch(this.selected) {
       case 'charactername':
         return this.list.filter(item => item.name.toLowerCase().includes(query))
       case 'id':
         // 数字类型ID转字符串后再匹配，避免调用不存在的方法报错
         return this.list.filter(item => String(item.id).includes(query))
       case 'episode':
         return this.list.filter(item => item.episode.toLowerCase().includes(query))
       default:
         return this.list
     }
   }
   

3. 修正原代码中括号不匹配、缩进混乱的语法问题，避免编译异常。

修复效果 #

• 下拉选中任意搜索字段后，无论是否在输入框输入内容，选中状态都会保持稳定，不会被意外重置。
• 按ID搜索时可自动兼容数字类型的字段值，不再触发方法不存在的错误，筛选逻辑正常生效。
• 搜索内容为空、未选择搜索字段时，会稳定返回全量列表，不会出现分支判断失效的问题。

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