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?


Log in to reply