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

    How to filter q-list elements by value

    Help
    2
    2
    749
    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.
    • K
      Kate last edited by Kate

      Hey there, I am working now on filtering q-list. I have a modal window, there is I have items of q-list.
      So I need to make stuff that when I click on each item in the list, at the bottom of the block, those items that I have selected come out. Moreover, you can select several elements at once, even all.

      My data comes from the backend. In data, I have a list that I output to my q-list with v-for like here.

              <ModalSelect v-if="showList">
                <q-list>
                  <q-item clickable v-ripple>
                    <q-item-section>Open now</q-item-section>
                    <q-item-section avatar>
                      <img src="../statics/icons/banks/checkMark.svg" />
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple v-for="(item, index) in filterList" :key="index" @click="toggleActive(item)">
                    <q-item-section avatar>
                      <img :src="`../statics/icons/banks/${item.icon}.svg`" />
                    </q-item-section>
                    <q-item-section>{{ item.title }}</q-item-section>
                    <q-item-section avatar>
                      <img v-show="item.isActive" src="../statics/icons/banks/checkMark.svg" />
                    </q-item-section>
                  </q-item>
                </q-list>
              </ModalSelect>
      
            ...
      
           filterList: [
              {
                icon: "branches",
                title: "Branches",
                isActive: false,
                type: "branch",
              },
              {
                icon: "savingBanks",
                title: "Saving Banks",
                isActive: false,
                type: "savings-bank",
              },
              {
                icon: "isUsd",
                title: "ATM (USD)",
                isActive: false,
                type: "ATM",
              }
            // and etc
           ]
      

      The toggleActive() function is to indicate what you have chosen, that is, the checkmark icon.

      My task is for the list to filter the data, that is, when one or several items are selected, it will display the same type in the lower block like here. My logic is that it would take data from the back-end, check it against the date type and return this filtered data.

      I don’t need a select. I need a q-list. My problem is that I cannot find an alternative to the select v-model.
      I do not need a selection, cause my list is not displayed completely initially and I cannot style them by design and I think it is easier to write a function like this in toogleActive ():

        toggleActive(s) {
            s.isActive = !s.isActive                
            // this.nearMe.filter(item => this.lala.some(f => item.type === f))
            //something like this
          }
      

      Any help would be greatly appreciated.

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        Why not use an array, then just push the items you selected on your click event.

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