如何在Vuejs中过滤多个元素

Question

I'm implementing an application in Vuejs , I'm having two select in which child select is being filtered if any options is being selected in parent select. I want to add an extra filter of checking whether it is a client or not:

I've a model.data which holds all the data, it is basically an array of elements :

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"},
]

I'm having a v-model="company_name" of parent select which is used as filter in child select

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

Guide me how to achieve this.

Answer 1

If the value returned by the callback to filter is true the element will be added to the filtered array you can use a many boolean operation as you like:

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

if your condition is more complicated you can do all you need in the body of the callback then return a boolean:

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