What does the .lazy modifier do?
The .lazy modifier changes the default behavior of v-model, switching the value update from the input event to the change event.
In simpler terms:
.lazymakesv-modelupdate the variable only after the user has finished typing and the field has lost focus (or Enter was pressed), instead of on every character.
How v-model works without .lazy
By default:
<input v-model="text">This updates text every time the user types a new character (the input event).
How v-model.lazy works
<input v-model.lazy="text">The value updates only on the change event:
- after the field loses focus
- or when Enter is pressed
- or when a value is selected in a select box
Example
<input v-model.lazy="search">
<p>{{ search }}</p>If the user types:
h → he → hel → hell → hello
Then search changes only once, when the user finishes typing and leaves the field.
When is .lazy useful?
1. To avoid updating the model on every character
For example, a search field that triggers an API request:
<input v-model.lazy="query">2. For forms where intermediate values do not matter
For example:
- entering a date
- entering a complex numeric format
- entering a value through a mask
3. For improving performance
If processing the data is heavy, .lazy reduces the number of unnecessary updates.
4. To avoid "dirty values"
For example, if you only want to validate the field after input.
Summary (perfect for an interview)
.lazyis av-modelmodifier that makes the variable update only on thechangeevent, instead of on every character entered. Useful for optimizing input, search, forms, and cases where intermediate values are not needed.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.