Suggest an editImprove this articleRefine the answer for “What are v-model modifiers?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Modifiers** for `v-model` are special suffixes (`.trim`, `.number`, `.lazy`) that change the default behavior of two-way binding. **Key point:** modifiers clarify exactly how Vue should update the model's value.Shown above the full answer for quick recall.Answer (EN)Image**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: ```html <input v-model.trim="name"> ``` --- ## What modifiers exist? **Vue 3** provides three built-in modifiers: --- ### 1) `.trim` - removes whitespace from the edges ```html <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 ```html <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: ```html <input v-model.lazy="title"> ``` That is, the data updates only when focus is lost or on Enter. --- ## Modifiers can be combined ```html <input v-model.trim.number="price"> ``` --- ## Modifiers in custom components A component can receive the modifiers object through: ```js binding.modifiers ``` But for `v-model` in components (Vue 3), a slightly different system is used. Vue automatically passes modifiers as props: ```html <MyInput v-model.trim="value" /> ``` In the child component, you can get them like this: ```js props: { modelModifiers: { type: Object, default: () => ({}) } } ``` Then apply it: ```js 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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.