What does the .number modifier do?

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.

In simple terms:

.number makes the value typed into the input turn from a string into the Number type.

---

#How does .number work?

The user types:

"25"

The age variable receives:

25 // a number, not a string

Vue automatically calls Number(value) or an equivalent conversion.

---

#Example

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

#3. So the API gets the right type

For example, the backend expects a number:

Without .number you would send the string "50".

#4. To avoid custom type coercion in the code

Instead of:

You can simply write:

---

#Important details

#1. If the value cannot be converted to a number

For example, "abc" or an empty string "":

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 variable