drop-down-menuvuejs3html-selectquasar-frameworkdropdownbox

Quasar2 Vue3 QSelect end of the multiple selection trigger when it loses focus


I have the following template:

<template>
  <q-item tag="label" v-ripple>
    <q-select
      borderless
      stack-label
      emit-value
      map-options
      multiple
      class="full-width"
      v-model="model"
      :options="options"
      :label="name"
      @change="onValueChange"
    />
  </q-item>
</template>

Since it is a multiple selection, I would like to be able to know when the selections complete which is usually when the QSelect loses focus or closed. This is so that I don't trigger any unnecessary action for every single change during the multi-selection by the user. The @change is not triggered at all.


Solution

  • Use slot:

    <template>
      <q-item tag="label" v-ripple>
        <q-select
          borderless
          stack-label
          emit-value
          map-options
          multiple
          class="full-width"
          v-model="model"
          :options="options"
          :label="name"
        >
          <template v-slot:after>
            <q-btn
              data-test="btnMultipleDropDownSetting"
              round
              dense
              flat
              color="primary"
              icon="done"
              @click="multiSelectionCompletes"
              :disable="submitButtonDisable"
            />
          </template>
        </q-select>
      </q-item>
    </template>