Modificadores a la directiva v-model en Vue.js
En nuestro anterior post vimos el enlace de datos doble o bidireccional qué básicamente nos permite enlazar datos desde el HTML hacia Vue y viceversa, todo esto con la directiva v-model. Adicional a esto es posible definir unos modificadores a esta directiva que permiten en algunos casos limpiar el dato de entrada. Veamos pues algunos modificadores disponibles en Vue.
.number
El modificador .number permite obtener el valor de la entrada de datos convertido al tipo number de JavaScript. Recordemos que por defecto los valores de los inputs son strings. Este modificador permite obtener el tipo number siempre que el valor pueda ser convertido a number, en cualquier otro caso se obtendrá el string.
.trim
El modificador .trim permite quitar espacios en blanco al comienzo y final de la entrada de datos. Recordemos que por defecto los espacios son considerados en los enlaces de datos.
.lazy
El modificador .trim permite que el evento de enlace sea ejecutado una vez el input detecta el evento .change. Por defecto, cuando realizas enlaces dobles de datos verás que al cambiar el valor de un input inmediatamente cambia su valor en la instancia de Vue. Este modificador, permite que solo se cambie cuando se detecta el evento de cambio .change, por ejemplo, cuando se pierde el foco de un input.
Vemos un ejemplo conjunto desde CodePen para enteder cada uno de estos modificadores.
En el primer input prueba colocando un número y después una palabra. Verás como el tipo (type) en el primer caso cambia a number (esto no sucede sin el modificador). En el segundo input prueba colocando tu primer nombre dejando unos cuantos espacios en blanco al comienzo. Verás que el resultado de length (longitud) no se ve afectado. Finalmente escribe algo en el último input y verás que el texto de abajo no cambia hasta que no salgas del foco de dicho input.