What are v-model modifiers?
Modifiers for v-model are special suffixes (.trim, .number, .lazy) that change the default behavior of two-way binding.
In simpler terms:
Modifiers clarify exactly how Vue should update the model's value.
They're used like this:
<input v-model.trim="name">What modifiers exist?
Vue 3 provides three built-in modifiers:
1) .trim - removes whitespace from the edges
<input v-model.trim="username">Input:
" Alex " → "Alex"
Used when you need to prevent extra whitespace, for example during login.
2) .number - casts the value to a number
<input v-model.number="age" />If the user types "42", the variable receives 42 (type Number).
This is convenient for:
- ages
- prices
- quantities
- any numeric field
3) .lazy - updates the model on change, not on input
Normally, v-model updates the data every time the user types a character.
.lazy switches the update to the change event:
<input v-model.lazy="title">That is, the data updates only when focus is lost or on Enter.
Modifiers can be combined
<input v-model.trim.number="price">Modifiers in custom components
A component can receive the modifiers object through:
binding.modifiersBut for v-model in components (Vue 3), a slightly different system is used.
Vue automatically passes modifiers as props:
<MyInput v-model.trim="value" />In the child component, you can get them like this:
props: {
modelModifiers: {
type: Object,
default: () => ({})
}
}Then apply it:
if (props.modelModifiers.trim) {
emittedValue = emittedValue.trim();
}How this works "under the hood"
A modifier directly changes behavior:
| Modifier | What it does |
|---|---|
.trim | trims whitespace before updating the data |
.number | casts the value to Number |
.lazy | binds the update to change instead of input |
Vue automatically adds the corresponding logic to the event handlers.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.