QSelect multiple show only nth selected options and hide remaining

[zentoac]

Hello,

when you have a multiple QSelect not too large, if you select many options, they are shown in the select container but they are arranged to start a new line... this is very unsightly.
It would be nice an option to show only nth selected options and hide remaining, just like the "size" option of bootstrap-select (https://developer.snapappointments.com/bootstrap-select/options/).

Thanks

[pdanpdan]

Use the slot, Luke
You can use selected or selected-item slots

[zentoac]

Oh yeah, cool!
May the force be with you! :)

[zentoac]

Well... actually is feasible but my custom message is repeated for every selected option. Any idea to show it just once?

This is the code:

          <q-select
            dense
            clearable
            multiple
            use-chips
            v-model.lazy="agent"
            input-debounce="150"
            use-input
            :options="agents"
            label="Agents"
            filled
            emit-value
            map-options
          >
            <template v-slot:selected-item="scope">
              {{ agent && agent.length === 1 ? scope.opt.label : agent.length + ' of ' + agents.length }}
            </template>
          </q-select>
        </div>

[pdanpdan]

selected-item is repeated for each item. selected is used only once

I'm on the phone right now, but if you put what you did in a codepen I'll make some adjustments to it

[zentoac]

Here it is... https://codepen.io/zentoac/pen/qBXgmGe

Thanks!!

[pdanpdan]

Different ways of showing the selected options:
https://codepen.io/pdanpdan/pen/abyXVBo?editors=1010

[zentoac]

Oh wow!!!! The good old live-saver "if" :)
Thank you very much!!!