Skip to main content

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:

.lazy makes v-model update 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:

html
<input v-model="text">

This updates text every time the user types a new character (the input event).


How v-model.lazy works

html
<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

vue
<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:

html
<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)

.lazy is a v-model modifier that makes the variable update only on the change event, instead of on every character entered. Useful for optimizing input, search, forms, and cases where intermediate values are not needed.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.