Vue 3配合collect.js实现多类别筛选JSON数据的问题咨询

一、原有代码可优化点 #

• 多选选择器绑定值类型错误：原生带multiple属性的select组件v-model绑定值为数组，原有初始值设为null会导致选择逻辑异常，建议初始值设为空数组
• 清空选项逻辑冲突：多选场景下value为null的option会和其他选中分类共存，无法实现预期的清空效果，建议单独新增清空按钮替代该option
• 分类字段名不规范：适配多分类需求后，单个项目关联多个分类，原字段名category（单数）容易引发歧义，建议修改为categories（复数）
• collect.js能力未合理使用：原有过滤逻辑仅用了collect的contains方法，可使用collect.js的链式调用简化整体过滤逻辑
• 分类展示逻辑不兼容多分类：原有模板直接输出project.category.name，多分类场景下需要循环输出所有关联分类

二、多分类需求适配实现 #

首先修正项目数据结构（你给出的示例语法有误，分类应为数组格式）：

projects: [{
  id: 3, 
  name: "Lorem ipsum dolor", 
  // 分类改为数组存储多个分类
  categories: [{id: 1, name: "Website"},{id: 2, name: "App"}]
}]

模板部分修改 #

<select v-model="selectedCategories" multiple>
  <option v-for="category in categories" :key="category.id" :value="category">
    {{ category.name }}
  </option>
</select>
<button @click="selectedCategories = []">清空选择</button>
<div v-for="project in filteredProjects" :key="project.id">
  <h6>{{ project.name }}</h6>
  <small>
    {{ project.categories.map(item => item.name).join('、') }}
  </small>
</div>

脚本部分修改 #

import collect from "collect.js";
export default {
  data() {
    return {
      projects: [
        {id: 1, name: "Lorem ipsum", categories: [{id: 1, name: "Website"}]}, 
        {id: 2, name: "Sit amet", categories: [{id: 2, name: "App"}]},
        {id: 3, name: "Lorem ipsum dolor", categories: [{id: 1, name: "Website"},{id: 2, name: "App"}]}
      ],
      categories: [{id: 1, name: "Website"}, {id: 2, name: "App"}],
      // 多选绑定值初始为空数组
      selectedCategories: [],
    };
  },
  computed: {
    filteredProjects() {
      // 没有选中分类时直接返回全部项目
      if (this.selectedCategories.length === 0) return this.projects;
      // 提取选中分类的id数组
      const selectedIds = collect(this.selectedCategories).pluck('id').toArray();
      // 过滤规则：项目包含任意一个选中分类即可命中
      return collect(this.projects).filter(project => {
        const projectCateIds = collect(project.categories).pluck('id').toArray();
        return collect(selectedIds).intersect(projectCateIds).isNotEmpty();
      }).toArray();
    },
  },
};

三、可选优化建议 #

• 如果项目数据量较大，可以提前把每个项目的分类id缓存为数组，避免每次计算属性执行时重复提取id，提升过滤性能
• 多选选择器可替换为UI组件库的多选器（如Element Plus的Select多选），交互体验优于原生select
• 若需要实现「同时命中所有选中分类才展示」的过滤规则，只需把过滤逻辑中的交集判断改为交集长度和selectedIds长度相等即可

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