如何在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"的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

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

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