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