Vue/Quasar input not firering update:model-value

by

How come the update:model-value is not triggered when I use custom +/- buttons? Works fine when just typing in the input field..

     <template v-slot:body-cell-qty="props">
        <q-td :props="props">
          <div class="column items-end">
            <q-input style="max-width: 120px;" dense outlined color="blue-grey-9" input-style="text-align: center" input-class="cell-input-dense" debounce="800" v-model="props.row.qty" @update:model-value="doUpdate()">
              <template v-slot:prepend>
                <q-btn round dense flat icon="remove" @click="props.row.qty--" />
              </template>
              <template v-slot:append>
                <q-btn round dense flat icon="add" @click="props.row.qty++" />
              </template>
            </q-input>
          </div>
        </q-td>
      </template>

  • You can create a watcher and add your doUpdate() function there and just keep the v-model

    – 

  • 1

    Because you are modifying the model outside of the input. @click="props.row.qty--" updates the model directly, while v-model="props.row.qty" is fired by the input’s events. if you want the trigger, you need to, somehow, tell the input to do that.

    – 

Leave a Comment