midVue.js
Explain 'Model Modifiers' in Vue 3.
Updated May 4, 2026
Short answer
Modifiers like .trim, .number, and .lazy change how v-model syncs data.
Deep explanation
.trim removes whitespace, .number casts the input string to a number, and .lazy syncs the data on 'change' events instead of 'input' events. You can also create custom modifiers for your own components.
Real-world example
Using .lazy for a long text area to prevent the reactivity system from firing on every single keystroke.
Common mistakes
- Expecting `.number` to prevent users from typing letters (it only casts the result).
Follow-up questions
- How do you handle custom v-model modifiers in a component?