VueJS 2中如何实现同一表单内筛选与搜索栏无冲突联动

核心逻辑是在你已有的filtered计算属性中叠加两层过滤规则，两个规则取逻辑与关系，即同时满足分类匹配、关键词命中的职位条目才会被返回，完全不会出现逻辑冲突，原有UI结构和分类筛选逻辑可以最大程度复用。

步骤1：绑定搜索框响应式状态 #

首先在data中新增搜索关键词的响应式字段，给搜索输入框绑定v-model，你原有的分类单选组、筛选栏展开收起、职位列表的模板结构不需要改动：

<template>
  <!-- 原有搜索栏结构，补充v-model绑定即可 -->
  <div class="search-bar">
    <input
      type="text"
      placeholder="输入职位名称、公司名称关键词搜索"
      v-model="searchKeyword"
    >
  </div>

  <!-- 以下是你原有分类筛选、职位列表结构，无需修改 -->
  <!-- <div class="filter-group">...单选框组...</div> -->
  <!-- <div class="job-list">...v-for遍历filtered渲染条目...</div> -->
</template>

<script>
export default {
  data() {
    return {
      // 你原有定义的字段全部保留
      infojobs: [], // 原始职位数据源
      selectedCategory: 'All', // 当前选中的职位分类
      filterBarCollapsed: false, // 筛选栏展开/收起状态
      // 新增搜索关键词字段，初始值为空字符串
      searchKeyword: ''
    }
  },

步骤2：改造filtered计算属性，叠加关键词过滤逻辑 #

你原有的计算属性只做了分类判断，直接在过滤回调里补充关键词匹配逻辑即可：

computed: {
    filtered() {
      // 预处理关键词：去首尾空格、统一转小写，规避无效空格、大小写差异导致的匹配问题
      const keyword = this.searchKeyword.trim().toLowerCase()

      return this.infojobs.filter(job => {
        // 保留你原有的分类匹配逻辑
        const isCategoryMatched = this.selectedCategory === 'All'
          ? true
          : job.category === this.selectedCategory

        // 新增关键词匹配逻辑：关键词为空时默认全匹配，否则匹配指定字段
        const isKeywordMatched = !keyword
          ? true
          : job.title.toLowerCase().includes(keyword)
            || job.company.toLowerCase().includes(keyword)
            || job.description.toLowerCase().includes(keyword)
            // 如需匹配更多字段（比如工作地点、薪资），在这里继续追加判断即可

        // 两个条件同时满足才返回对应条目
        return isCategoryMatched && isKeywordMatched
      })
    }
  }
}
</script>

避坑提示 #

• 不需要拆分两个独立计算属性分别处理分类筛选、关键词筛选，单次filter遍历同时判断两个条件性能更高，不会出现两个筛选状态不同步的问题
• 如果需要做多关键词模糊匹配，可以把预处理后的关键词按空格拆分成数组，判断职位条目是否包含所有拆分后的关键词即可，不需要额外引入第三方搜索库
• 原有列表渲染逻辑完全不需要改动，只要保持v-for="job in filtered"的遍历方式，两个筛选条件的结果会自动统一输出到同一个列表区域，切换分类、输入关键词时列表会自动响应更新

内容的提问来源于stack exchange，提问作者Hiếu Nguyễn