Filtros en Vue.js: tutorial con ejemplos

Filtros en vue - ejemplo para convertir a mayúscula

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:

filters:{
  filtro1(){
    //
  }
}

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í:

Vue.filter("mayusculas", v => (v || "").toString().toUpperCase());

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:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Ejemplo de filtro en Vue.js</title>
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous">

</head>

<body>

 <main role="main" class="container">
  <div class="row">
   <div class="col-12" id="app">
    <h1>Filtro en Vue.js</h1>
    <a href="//parzibyte.me/blog">By Parzibyte</a>
    <br>
    <strong>Mi nombre: </strong>{{nombre}}
    <br>
    <strong>Mi nombre en mayúscula: </strong>{{nombre | mayusculas}}
   </div>
  </div>
 </main>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">

 </script>
 <script src="script.js">

 </script>
</body>

</html>

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:

// Registrar el filtro
Vue.filter("mayusculas", v => (v || "").toString().toUpperCase());
// Dentro de la instancia no es necesario declararlo
// pues ya está registrado globalmente
new Vue({
 el: "#app",
 data: () => ({
  nombre: "Luis Cabrera Benito"
 }),
});

El resultado es el siguiente:

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.

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í:

// Registrar el filtro
Vue.filter("mayusculas", v => (v || "").toString().toUpperCase());
// El otro filtro
Vue.filter("cortar", v => (v || "").substr(0, 10) + "...");

// Dentro de la instancia no es necesario declararlo
// pues ya está registrado globalmente
new Vue({
 el: "#app",
 data: () => ({
  nombre: "Luis Cabrera Benito"
 }),
});

Ahora dentro de la vista se hace esto:

<div class="col-12" id="app">
  <h1>Filtro en Vue.js</h1>
  <a href="//parzibyte.me/blog">By Parzibyte</a>
  <br>
  <strong>Mi nombre: </strong>{{nombre}}
  <br>
  <strong>Mi nombre en mayúscula: </strong>{{nombre | mayusculas | cortar}}
</div>

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

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.

// Registrar el filtro
Vue.filter("dinero", (valor, signo) => {
 // Si no hay valores regresamos una cadena vacía
 if (!valor || !signo) return "";
 let valorConDecimales = valor.toFixed(2);
 return signo + "" + valorConDecimales.toString();
});

// Dentro de la instancia no es necesario declararlo
// pues ya está registrado globalmente
new Vue({
 el: "#app",
 data: () => ({
  total: 1750.6558
 }),
});

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í:

<div class="col-12" id="app">
  <h1>Filtro en Vue.js</h1>
  <a href="//parzibyte.me/blog">By Parzibyte</a>
  <br>
  <strong>Total: </strong>{{total | dinero("$")}}
  <br>
  <strong>Como euros: </strong>{{total | dinero("€")}}
  <br>
  <strong>Un valor de la vista: </strong>{{465465.3262 | dinero("¥")}}
  <br>
</div>

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:

Pasar argumento al filtro

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 😉

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/