I am currently working on creating a small Vue.js 2.0 application where I am utilizing the v-select component from here. The data format that I am dealing with looks something like this:
{
"model":
[
{
"id":1,
"salutation":"Mr",
"first_name":"Rahul",
"last_name":"Bashisht",
"number":"9876521102",
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0674676e736a466f656f656f6467686d2865696b">[email protected]</a>",
"company":
{
"id":1,
"name":"ICICI Bank",
"is_client":1,
}
},
{
"id":2,
"salutation":"Mr",
"first_name":"Vikash",
"last_name":"Pandey",
"number":"0987654345",
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8aeb1b3b9abb098b0bcbebbf6bbb7b5">[email protected]</a>",
"company":
{
"id":2,
"name":"HDFC Bank",
"is_client":0,
}
}
]
}
After setting this data to a variable model, I am attempting to filter it based on client = 1 in a computed property as follows:
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}))
}
},
Next, I am using this filtered data in the v-select options section like this:
<v-select multiple :options="contactClients" v-model="clientParticipants"></v-select>
Furthermore, I have another v-select that should display company names where is_client is true. To achieve this, I have a dataset of companies structured as shown below:
{
"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,
}
]
}
This company data is stored in a variable called companies and is filtered as follows:
clients: function () {
if(this.companies)
{
return this.companies
.filter(f => f.is_client == 1)
.map(d => ({label: d.name, value: d.id}))
}
}
The v-select in this case will contain:
<v-select :options="clients" v-model="summary.client"></v-select>
My goal is to introduce an additional filter based on the selection made in the contactsClients list. If any items are selected in the first list, the second list should only display companies related to those selections. Otherwise, the default options should be displayed with a simple is_client filter as it currently does. Since multiple selections can be made in the contactClients list, I am unsure how to proceed with filtering these elements. Any guidance would be greatly appreciated.
Edit: Codepen Link