How to filter q-list elements by value

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.

metalsadman

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