Filter in VueJs

Question

Ich versuche, eine kleine Anwendung in Vuejs 2.0 zu bauen, wo ich v-select Komponente bin mit, ich habe ein Datenformat etwas wie folgt aus:

{ 
    "model": 
     [ 
      { 
       "id":1, 
       "salutation":"Mr", 
       "first_name":"Rahul", 
       "last_name":"Bashisht", 
       "number":"9876521102", 
       "email":"rahul@icicibank.com", 
       "company": 
        { 
         "id":1, 
         "name":"ICICI Bank", 
         "is_client":1, 
        } 
      }, 
      { 
       "id":2, 
       "salutation":"Mr", 
       "first_name":"Vikash", 
       "last_name":"Pandey", 
       "number":"0987654345", 
       "email":"vikash@hdfc.com", 
       "company": 
        { 
         "id":2, 
         "name":"HDFC Bank", 
         "is_client":0, 
        } 
      } 
     ] 
} 

Jetzt bin ich Einstellung dies auf eine Variable model und dann mit client = 1 in computed property etwas zu filtern versuchen:

contactClients: function() { 
    if(this.model) 
    { 
     return this.model 
      .filter(f => (f.company.is_client == 1)) 
      .map(d => ({label: d.first_name+' '+d.last_name+' - '+d.company.name, value: d.id})) 
    } 
}, 

dann ist es in v-Optionen auswählen, wie ich bin Abdrucken:

<v-select multiple :options="contactClients" v-model="clientParticipants"></v-select> 

Jetzt habe ich eine andere v-select, die in Übereinstimmung mit Firmenname ist aber is_client wahr ist, so etwas wie dieses Ich versuche:

I-Daten einer Gruppe von Unternehmen haben:

{ 
    "model": 
     [ 
      { 
       "id":1, 
       "name":"ICICI Bank", 
       "is_client":1, 
      }, 
      { 
       "id":2, 
       "name":"HDFC Bank", 
       "is_client": 0, 
      }, 
      { 
       "id":3, 
       "name":"BNP Paribas", 
       "is_client": 0, 
      } 
      { 
       "id":4, 
       "name":"Barclays Bank", 
       "is_client": 1, 
      } 
     ] 
}  

ich platzieren es in companies variabel und Filterung es so etwas wie dieses:

clients: function() { 
    if(this.companies) 
    { 
     return this.companies 
      .filter(f => f.is_client == 1) 
      .map(d => ({label: d.name, value: d.id})) 
    } 
} 

und in v-Auswahl ich habe:

<v-select :options="clients" v-model="summary.client"></v-select> 

Ich möchte die Auswahl von contactsClients einen zusätzlichen Filter in Übereinstimmung haben, das heißt, wenn jeder contactsClients in der ersten Liste ausgewählt werden, sollten zweite Liste nur diejenigen company als Option und wenn es keine Auswahl in erster list (contactClients) dann sollte die zweite Liste alle Standardoptionen mit einem einfachen is_client Filter haben, der sich in der aktuellen Situation befindet. Da die Auswahl in contactClients mehrfach ist, weiß ich nicht, wie man Elemente filtert. Bitte führen Sie mich.

Edit:Codepen Link

Answer 1

Vielleicht hilft Ihnen dies.

contactClients: function() { 
    if (this.model) { 
    return this.model.filter(f => f.company.is_client == 1).map(d => ({ 
     label: d.first_name + " " + d.last_name + " - " + d.company.name, 
     value: d.id, 
     companyId: d.company.id 
    })); 
    } 
}, 
clients: function() { 
    var self = this; 
    var res = []; 
    if (this.companies) { 

    if (this.clientParticipants.length) { 
     console.log(this.clientParticipants) 
     this.clientParticipants.forEach(function(cc) { 
     self.companies.forEach(function(c) { 
      if (cc.companyId === c.id) { 
      res.push(c); 
      } 
     }); 
     }); 
     return res.map(d => ({ label: d.name, value: d.id })); 
    } else { 
     return this.companies 
     .filter(f => f.is_client == 1) 
     .map(d => ({ label: d.name, value: d.id })); 
    } 
    } 
} 

Beispiel here

Answer 2

Sie könnten eine berechnete Eigenschaft benutzen, um Ihre Filterlogik dort zu implementieren und an Ihre zweite Liste binden. Ref .: https://vuejs.org/v2/guide/computed.html#Computed-Properties