如何在Vuejs中过滤多个元素

Question

我正在Vuejs 中实现一个应用程序，我有两个选择，如果在父选择中选择了任何选项，则会在其中过滤子选择。我想添加一个额外的过滤器来检查它是否是客户端：

我有一个包含所有数据的 model.data，它基本上是一个元素数组：

model.data: [
    {id: 1, name: XYZ 1, is_client: 0, address: "ABCD Address 1"},
    {id: 2, name: XYZ 2, is_client: 1, address: "ABCD Address 2"},
    {id: 3, name: XYZ 3, is_client: 0, address: "ABCD Address 3"},
]

我有一个父选择的v-model="company_name"，它在子选择中用作过滤器

filteredCompanyOptions() {
    if (this.model.data)
    {
        return this.model.data
            .filter(f => f.name !== this.company_name.label)
            .map(d => ({label: d.name, value: d.id}))
    }
}

指导我如何实现这一目标。

Answer 1

如果过滤器回调返回的值为真，则元素将被添加到过滤后的数组中，您可以根据需要使用多个布尔运算：

filteredCompanyOptions () {
  if (this.model.data) {
    return this.model.data
      .filter(f => f.name !== this.company_name.label && f.is_client === 1)
      .map(d => ({ label: d.name, value: d.id }))
  }
}

如果你的情况更复杂，你可以在回调的主体中做所有你需要的，然后返回一个布尔值：

filteredCompanyOptions () {
  if (this.model.data) {
    return this.model.data
      .filter(f => {
        if (f.name !== this.company_name.label && f.is_client === 1) {
          return true
        } else {
          return false
        }
      })
      .map(d => ({ label: d.name, value: d.id }))
  }
}