Algo que utilizo en mi día a día con VueJS son los “filters”, estos me permiten modificar la información que ve el usuario de una forma fácil.

Los filtros son una característica que podemos utilizar en nuestros templates para transformar cómo se visualizan los datos, esto quiere decir que nuestra data mantiene su estado original y es modificada solo en la visualización.

Creando y Registrando

Los filtros podemos crearlos y registrarlos de forma global usando Vue.filter() o de forma local en los componentes en la propiedad filters.

Un filtro es una función que recibe como parámetro el valor a transformar y lo retorna con la modificación. He creado el filtro “plural” que recibe el valor a transformar y retorna el valor agregando una “s” al final.

Para utilizarlo en el template uso un | “pipe” , Vue toma el valor antes del pipe y lo envia a la función.

(se abre en una ventana nueva)

Anidando Filtros 

Podemos unir varios filtros de forma seguida usando otros | despues de un filtro, he creado otro filtro rever retorna el revés de un texto recibido.

Vue.filter(‘rever’,function(value){
 return value.split(“”).reverse().join(“”);
})

Para enlazar los filtros plural y rever uso un | “pipe” extra para que rever reciba la transformación con la s.

 template:'<div> <span> {{phone | plural | reverse }}</span></div>'

See the Pen Anidado filtros en VueJS by Dany Paredes (@danywalls) on CodePen.

Como podéis ver los filtros nos permiten modificar o hasta integrar librería de terceros de forma transparente, puedes ver mi post de como integrar Momentjs con Vue gracias a los filtros o leer un poco más en la documentación oficial.

https://vuejs.org/v2/guide/filters.html

Happy Vue

Categories: VUE