Filtros en Vue.js: tutorial con ejemplos

Uso de los filtros en Vue JS

En este post te voy a mostrar cómo declarar y usar los filtros en Vue.js: un buen framework de JavaScript.

Los filtros en Vue.js

Un filtro, al menos para estos términos, transforma datos en la vista. Por ejemplo, muestra una cadena en mayúsculas.

También sirven para formatear dinero y para otras cosas más en donde se necesita transformar el valor solo al mostrarlo (pero que el original no cambie).

Registrar filtro

Existen dos formas de registrar un filtro. Una forma es registrarlo globalmente, es decir, que todos los componentes tengan acceso al mismo.

Vue.filter("nombre", función);

El segundo es declararlo dentro de una única instancia para que solo se use dentro de la misma. Simplemente declaramos la propiedad filters y dentro de la misma las funciones del filtro:

Usar filtro

Para usar un filtro se puede usar el operador pipe |:

{{valor | filtro}}

También se puede al declarar atributos dinámicos. Por ejemplo:

<p :class="valor | filtro"></p>

Recuerda: el operador pipe es como una tubería que permite conectar o filtrar datos, así como los pipes en Linux.

Ejemplo de filtro

Vamos a hacer un filtro que convierte a mayúsculas una cadena. Me ha quedado así:

Declaro la función usando la sintaxis de las arrow functions, y luego uso (v || "") por si no envían valor (así no aparece un cannot read toString of undefined) y finalmente regreso ese valor a cadena y a mayúscula.

Es importante la llamada a toString para asegurarse de que es una cadena.

Ahora se utiliza así:

{{variable | mayusculas}}

Declaramos la vista:

Puedes ver el ejemplo del filtro en la línea 23. Estamos pasando la variable a través del filtro llamado mayusculas.

Ahora en el script definimos el filtro de Vue.JS así como la instancia:

El resultado es el siguiente:

Filtros en vue - ejemplo para convertir a mayúscula
Filtros en vue – ejemplo para convertir a mayúscula

Cuando paso el segundo valor a través del filtro, el mismo se aplica. Obviamente si el valor cambia, se le aplicará de nuevo el filtro.

Puedes probar el ejemplo aquí.

Anidar, encadenar o juntar filtros

Podemos usar múltiples filtros, se aplicarán en el orden indicado. Veamos un ejemplo de esto.

Para ello, crearé otro filtro que corta una cadena y le agrega tres puntos. Recuerda, es solo un ejemplo para este filtro.

Los filtros quedan así:

Ahora dentro de la vista se hace esto:

Presta atención a la línea 7. Ahí está lo siguiente:

{{nombre | mayusculas | cortar}}

Primero la variable pasará por el filtro de mayúsculas y el resultado será pasado al que trunca la cadena. Resultando en lo siguiente:

Anidar filtros en Vue

Puedes probarlo aquí.

 

Argumentos en los filtros de Vue

Los filtros en Vue pueden tomar argumentos. Un filtro viejo que recuerdo de AngularJS era uno de moneda, el cual tomaba como argumento el signo de moneda para formatear el dinero.

Hagamos un filtro de moneda de ejemplo que tome un argumento. Un filtro en Vue es, al final, una función que toma argumentos.

El primer argumento del filtro siempre será el valor al que le aplicamos el filtro, y los siguientes serán los argumentos que se pasan desde la vista. Con los ejemplos se entenderá mejor.

En este filtro podemos apreciar una función más detallada, no tan corta como las otras. Lo que hacemos es redondear, agregar decimales, convertirlo a string y concatenarlo con el signo.

Dentro de la vista, se utiliza así:

En la línea 5 tenemos el valor formateado con el signo de pesos mexicanos, en la línea 7 tenemos el dinero formateado con Euros y finalmente en la línea 9 con Yenes.

(son ejemplos, no sé si realmente el signo va en ese lugar y todo eso)

También es importante notar la línea 9 ya que estamos formateando un valor que no existe como variable en la instancia de Vue.

El resultado es el siguiente:

Argumentos en los Filtros de Vue JS
Pasar argumento al filtro

Puedes probarlo aquí.

Conclusión y notas finales

  • Los filtros se pueden anidar
  • Los filtros pueden tomar argumentos, ya sean variables dentro de la vista o dentro de la instancia de Vue.
  • El primer argumento que toman los filtros de Vue JS es el valor que se formatea
  • Se utiliza el pipe | para indicar el uso de un filtro.
  • Un filtro se puede usar en las plantillas {{ }} o como atributo del elemento <elemento :atributo="valor | filtro"/>

Puedes leer más sobre Vue.JS o JavaScript moderno en mi blog 😉

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario