Filtered Selection Box by Another Selection ?
-
I want to filter a selection box options list by selecting another select box option? here it’s my cutomers select box;
<q-select :options="filteredCustomers" option-label="name" option-value="id" v-model="macFilter.customers" label="Müşteri" style="width: 200px" multiple emit-value map-options clearable dense options-dense @clear="clearCustomerSelection" hide-selected use-input @filter="filterCustomer" input-debounce="0" @input="updateProjectList"> <template v-slot:option="scope"> <q-item dense v-on="scope.itemEvents" v-bind="scope.itemProps"> <q-item-section side><q-checkbox v-model="macFilter.customers" :val="scope.opt.id" /></q-item-section> <q-item-section><q-item-label v-html="scope.opt.name"></q-item-label></q-item-section> </q-item> </template> </q-select>
and this is my projects select box ;
<q-select :options="filteredProjects" option-label="name" option-value="id" v-model="macFilter.projects" label="Proje" style="width: 200px" multiple emit-value map-options clearable dense options-dense @clear="clearProjectSelection" hide-selected use-input @filter="filterProject" input-debounce="0"> </q-select>
I want to filter projects options list according to selected customer… I call updateProjectList function in cutomers select box with @input event;
updateProjectList (val) { console.log(val) if (val) { this.filteredProjects = this.projects.filter(project => val.every(id => id === project.customer_id)); console.log(this.filteredProjects) } }
It’s expected that filter projects list but it doesn’t work…
filteredProjects data property is updating but nothing happens in project selection list… Where is my mistake?