Vue.js实现下拉框非精确匹配数组及无需点击搜索实时更新方法

多值匹配功能实现 #

核心修改点是把原有全等匹配的逻辑，替换为逗号分割多值后校验包含关系：

• 先把每条数据的type字段按逗号切割为数组，同时去除每个值前后的空格，避免空格导致匹配失败
• 再判断当前下拉选中的值是否存在于切割后的数组中即可
  示例核心代码：

filterFunction() {
  // selectedType为下拉框绑定的选中值
  const targetType = this.selectedType
  return this.rawData.filter(item => {
    // 切割多值并去空格
    const itemTypes = item.type.split(',').map(type => type.trim())
    return itemTypes.includes(targetType)
  })
}

下拉自动触发筛选功能实现 #

推荐用Vue计算属性实现，无需额外绑定事件，只要下拉选中值变化，筛选结果会自动更新：

1. 给下拉框绑定v-model对应到响应式变量，比如selectedType
2. 将筛选结果定义为计算属性，依赖selectedType和原始数据，示例代码：

<template>
  <!-- 下拉框无需绑定额外事件，v-model变化会自动触发计算属性更新 -->
  <select v-model="selectedType">
    <option value="">全部</option>
    <option value="BMW">宝马</option>
    <option value="Ford">福特</option>
  </select>
  <!-- 直接遍历计算属性filteredList渲染结果 -->
  <div v-for="item in filteredList" :key="item.id">{{ item.name }}</div>
</template>
<script>
export default {
  data() {
    return {
      selectedType: '',
      rawData: [
        // 替换为你自己的原始数据，格式参考 {name: '车型1', type: 'BMW, Ford'}
      ]
    }
  },
  computed: {
    filteredList() {
      // 未选中选项时返回全部数据
      if (!this.selectedType) return this.rawData
      return this.rawData.filter(item => {
        const itemTypes = item.type.split(',').map(type => type.trim())
        return itemTypes.includes(this.selectedType)
      })
    }
  }
}
</script>

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