Suggest an editImprove this articleRefine the answer for “What does the .number modifier do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**The `.number` modifier** on the v-model directive automatically converts the value entered by the user into a number before writing it to the model. **Key point:** if the value cannot be converted to a number (for example, "abc"), the model receives NaN.Shown above the full answer for quick recall.Answer (EN)ImageThe `.number` modifier on the `v-model` directive automatically **converts the value entered by the user into a number** before writing it to the model. In simple terms: > `.number` **makes the value typed into the input turn from a string into the Number type.** --- ## How does `.number` work? ```html <input v-model.number="age"> ``` The user types: ``` "25" ``` The `age` variable receives: ``` 25 // a number, not a string ``` Vue automatically calls `Number(value)` or an equivalent conversion. --- ## Example ```vue <input v-model.number="price" /> <p>Type: {{ typeof price }}</p> ``` The user types: ``` "100" ``` This is shown: ``` Type: number ``` --- ## When is it useful to use `.number`? #### 1. For numeric form fields - age - price - size - quantity - rating #### 2. To avoid comparison errors ```js "10" > "2" // true (lexical comparison) 10 > 2 // true ``` #### 3. So the API gets the right type For example, the backend expects a number: ```json { "limit": 50 } ``` Without `.number` you would send the string `"50"`. #### 4. To avoid custom type coercion in the code Instead of: ```js age = Number(e.target.value) ``` You can simply write: ```html <input v-model.number="age"> ``` --- ## Important details #### 1. If the value cannot be converted to a number For example, `"abc"` or an empty string `""`: ```js Number("abc") // NaN ``` The model receives **NaN**. #### 2. Works only for input type="text" and similar For `input type="number"` this is usually also useful, but you need to account for HTML5 validation. #### 3. Does not affect the display, only the value saved to the variableFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.