javascript - 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

如果 filter 的回调返回的值为真，元素将被添加到过滤后的数组中，您可以根据需要使用许多 bool 运算:

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

如果您的情况更复杂，您可以在回调主体中执行所有需要的操作，然后返回一个 bool 值:

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