Modifiers to the v-model Directive in Vue.js
In our previous post we saw the double or bidirectional data binding which basically allows us to link data from HTML to Vue and vice versa, all with the v-model directive. In addition to this, it's possible to define modifiers to this directive which allow in some cases to clean the input data. Let's see then some modifiers available in Vue.
.number
The .number modifier allows obtaining the input data value converted to JavaScript's number type. Remember that by default the input values are strings. This modifier allows obtaining the number type whenever the value can be converted to a number, in any other case the string will be obtained.
.trim
The .trim modifier allows removing white spaces at the beginning and end of the data input. Remember that by default spaces are considered in data bindings.
.lazy
The .trim modifier allows the binding event to be executed once the input detects the .change event. By default, when you make double data bindings you will see that when changing the value of an input, its value in the Vue instance changes immediately. This modifier allows changing only when the .change event is detected, for example, when the focus on an input is lost.
We see a joint example from CodePen to understand each of these modifiers.
In the first input test by placing a number and then a word. You will see how the type in the first case changes to number (this does not happen without the modifier). In the second input, try placing your first name leaving a few white spaces at the beginning. You will see that the length result is not affected. Finally, type something in the last input and you will see that the text below does not change until you leave the focus on that input.