Vue supports lazy binding to models with the lazy modifier, e.g.

<input v-model.lazy="value" />

Now the model isn't updated until the input loses focus. However, if I change the type to Number and use the arrow keys to set the value, the model updates while the input has focus:

<input type="number" v-model.lazy="value" />

Is there an (easy) way to delay binding until after focus is lost?

CodePudding user response：

v-model is synonymous for :value @change. Assuming the arrows on input trigger a focus event, you can try replacing v-model with :value and @blur pair. Might not work if .lazy modifier already does this.

<input type="number" :value="value" @blur="value = $event.target.value" />

Another alternative is to "debounce" the change event with a set time so the value doesn't update while the user is changing the value.