No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Filtered Selection Box by Another Selection ?

    Help
    1
    1
    101
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      mecjos last edited by mecjos

      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?

      1 Reply Last reply Reply Quote 0
      • First post
        Last post