在 Vue js 中结合搜索和复选框过滤器答案

【问题标题】：Combine Search and checkbox filters in Vue js在 Vue js 中结合搜索和复选框过滤器
【发布时间】：2020-10-05 08:40:16
【问题描述】：

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

我有两个功能独立工作。

搜索字段

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))
    }
  },

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

【问题讨论】：

使用两个过滤器作为` .filter(...firstFilter).filter(...secondFilter)` 将导致两个过滤器作为AND 工作

标签： search vuejs2 computed-properties

【解决方案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))
}

【讨论】：