如何在Vue.js中按指定枚举值过滤文档数组？

要实现按特定枚举值精准过滤文档，同时保留原有的模糊搜索功能，可以按以下步骤修改：

1. 添加类型过滤变量 #

在Vue组件的data中新增一个变量，用于存储用户选中的目标枚举值：

data() {
  return {
    search: '', // 原有搜索变量
    selectedType: null // 新增：存储选中的文档类型枚举值，初始为null表示不过滤类型
  }
}

2. 修改过滤计算属性 #

更新filteredDocuments计算属性，在原有模糊过滤逻辑的基础上，加入类型精准匹配的判断：

computed: {
  filteredDocuments() {
    return (this.documents ?? []).filter(document => {
      // 原有模糊搜索逻辑：匹配文档名称或翻译后的类型文本
      const matchesSearch = document.name.toUpperCase().includes(this.search.toUpperCase()) ||
                            this.$t(`model.document.types.${document.type}`).toUpperCase().includes(this.search.toUpperCase());
      
      // 新增类型精准过滤：如果选中了类型，则必须匹配；未选中则跳过类型过滤
      const matchesType = this.selectedType ? document.type === this.selectedType : true;
      
      // 只有同时满足搜索条件和类型条件（如果有）的文档才会被保留
      return matchesSearch && matchesType;
    });
  }
}

3. 可选：添加类型选择UI #

如果需要让用户通过界面选择要过滤的类型，可以添加一个下拉选择器：

<select v-model="selectedType">
  <option value="">全部文档类型</option>
  <option value="ANNUAL_ACCOUNTS">年度账目</option>
  <option value="APPENDIX">附录</option>
  <option value="BANK_GUARANTEE">银行保函</option>
  <option value="BUDGET">预算</option>
</select>

这样用户既可以通过搜索框进行模糊搜索，也可以通过下拉框选择特定类型进行精准过滤，两种过滤条件会同时生效。

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