Vue js中的组合搜索和复选框过滤器

Question

我必须使用搜索输入字段来过滤列表，并选中一些复选框（按类别过滤）。

我有两个功能都独立工作。

搜索字段

computed: {
    getfilteredData() {
      return this.experiences.filter(experience =>
        experience.name.toLowerCase().includes(this.search.toLowerCase()) ||
          experience.category.toLowerCase().includes(this.search.toLowerCase()
        )
      )
    }
  },

[复选框

computed: {
    getfilteredData() {
      if (!this.checkedCategories.length)
        return this.experiences

        return this.experiences.filter(experience => 
          this.checkedCategories.includes(experience.category))
    }
  },

如何合并这些过滤器？所以他们同时工作吗？

Answer 1

连续合并两个过滤器将两个过滤器都作为AND语句

getfilteredData() {
    return this.experiences.filter(experience =>
        experience.name.toLowerCase().includes(this.search.toLowerCase()) ||
            experience.category.toLowerCase().includes(this.search.toLowerCase()
        )
    ).filter(experience => 
        // if there are no checkboxes checked. all values will pass otherwise the category must be included
        !this.checkedCategories.length || this.checkedCategories.includes(experience.category)
    )
}

否则，您可以将它们与(firstCondition || secondCondition)组合在一个过滤器中，并使用与上面相同的逻辑。

[我看到您的另一个问题已经解决Write my Javascript more cleaner in my Vue js search functionality我认为您可以像这样重写函数

experience => {
    let reg = new RegExp(this.search, 'gi')
    return reg.test(`${experience.name} ${experience.category}`)
}

使用g意味着您的字符串可以在任何位置，但是您必须在每个测试中重建您的正则表达式，否则最终可能会遇到这里的问题

Why am I seeing inconsistent JavaScript logic behavior looping with an alert() vs. without it?

使用i表示它将忽略大小写，因此您无需担心使用toLowerCase()

因此您的过滤器可以这样写在一条语句中

experience => {
    let reg = new RegExp(this.search, 'gi')

    // search input matches AND the checkbox matches
    return reg.test(`${experience.name} ${experience.category}`) && (!this.checkedCategories.length || this.checkedCategories.includes(experience.category))

    // search input matches OR the checkbox matches
    //return reg.test(`${experience.name} ${experience.category}`) || (!this.checkedCategories.length || this.checkedCategories.includes(experience.category))
}