Using modifiers

Vue provides these three modifiers, .lazy, .number, and .trim, that we can use with v-model to change the default events or to add extra functionality to the form input. Let's dive in.

Adding .lazy

We can use .lazy with v-model to change the input event to a change event on the <input> and <textarea> elements. See the following example:

// src/components/modifiers.vue
<input v-model.lazy="form.name" type="text">

Now the input with the data is synced after change, instead of the input event, which is the default.

Adding .number

We can use .number with v-model to change the default typecast of string to number on <input> elements with type="number". See the following example:

// src/components/modifiers.vue
<input v-model.number="form.age" type="number">

Now you get number for typeof this.form.age instead of string without having .number.

Adding .trim

We can use .trim with v-model to trim...