Introducción ¿qué son los filtros?

Los filtros (o filters) es una de esas cosas de Vue que son muy sencillas de aprender y de entender y que además ayudan mucho a al desarrollar webs con Vue.

Un filtro en Vue es una función que se va a ejecutar ANTES de pintar un dato en una vista en Vue, es decir, normalmente se usan para formatear datos.

Imagina que tienes una variable con un dato que es un número del 0 al 1, por ejemplo 0.5 y lo que quieres representar en forma de porcentaje. Si no conoces los filtros lo más normal es que crees una propiedad computada para transformar el dato en porcentaje, pero con los filtros puedes hacer esto mismo mucho más sencillo.

Además, una cosa buena de los filtros es que los puedes reutilizar a lo largo de todo el proyecto de Vue sin necesidad de andar creando computadas todo el rato. De hecho cuando quieres usar un filtro no tienes ni que importar nada, basta con poner el nombre del filtro.

Veamos cómo funcionan y cómo crear filtros en Vue:

Cómo se crean los filters en Vue

Imaginemos ahora que queremos formatear un número para representarlo en forma de cantidad moneataria, con dos decimales y con el símbolo de la moneda.

Con computadas sería así:

computed: {
  currency() {
    return this.value.toFixed(2).toLocaleString() + " $";
  }
}

Lo que yo recomiendo para los filtros es crear un fichero separado dentro del proyecto para albergar todos los filtros. Por ejemplo lo que puedes hacer es crear un fichero filters.js dentro de la carpeta src al mismo nivel que el fichero main.js.

// filters.js
import Vue from "vue";

Vue.filter("currency", value => {
  return value.toFixed(2).toLocaleString() + " $";
});

Dentro de ese fichero que acabamos de crear lo que hay que hacer primero es importar Vue. Después se ejecuta la función filter sobre el objeto Vue para crear un filtro.

Dentro de ese método, primero se pasa el nombre que queremos que tenga el filtro. El segundo argumento es una función que recibe un valor. En este caso he optado por poner un arrow function de ES6.

Dentro de esa función lo que hay que hacer SIEMPRE es devolver el valor ya formateado. Por ejemplo en el ejemplo de arriba se formatea al número que venga para que tenga dos decimales y se añade el símbolo de la moneda.

Si por ejemplo quieres añadir otro filtro tan solo tienes que volver a llamar a la función filter de Vue:

// filters.js
import Vue from "vue";
import dayjs from "dayjs";

Vue.filter("currency", value => {
  return value.toFixed(2).toLocaleString() + " $";
});

Vue.filter("date", value => {
  return dayjs(value).format("YYYY-MM-DD");
});

Ahora he añadido otro filtro para formatear fechas con la librería de dayjs.

Para poder usar estos filtros dentro del componente, lo primero que tienes que hacer es importar este fichero dentro del fichero main.js:

// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import "./filters.js";

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

¿Cómo usar los filtros?

Para usar los filtros tan solo tienes que poner una barra vertical y el nombre del filtro que quieras añadir, por ejemplo:

<div>
  {{ amount | currency }}
  <div>
    <div>{{ date | date }}<span>
      <h2>{{ new Date() | date }}</h2>
    </div>
  </div>
</div>

Dentro de las dos llaves (recuerda que se usan para poner un valor de una variable, computada, método del componente o código javascript) añades una barra vertical y añades y el nombre del filtro.

Lo bueno de esto es que si los reutilizas todo lo que puedas si un día quieres cambiar cómo se representan las fechas simplemente tienes que cambiar el formateo en los filtros.

Filtros con argumentos

Imagina que ahora, para el ejemplo de pintar el valor con dos decimales y la moneda, quieres que para cierto caso se pinte 1 decimal. En lugar de tener que crear dos filtros diferentes, lo que puedes hacer es pasar un parámetro extra al filtro:

import Vue from "vue";

Vue.filter("currency", (value, decimals) => {
  return value.toFixed(decimals).toLocaleString() + " $";
});

Ahora en ls vista lo que tienes que hacer es pasar el número de decimales que quieras, como si fuera un método:

{{ 23.343434 | currency(1) }} 
{{ 23.343434 | currency(2) }}

Por cierto, también puedes dejar por defecto un valor para los parámetros por si al filtro no le pasas ningún valor:

Vue.filter("currency", (value, decimals = 2) => {
  return value.toFixed(decimals).toLocaleString() + " $";
});

Concatenar varios filtros

Una de las ventajas de los filtros es que los puedes concatenar, es decir, el resultado de un filtro es la entrada del otro filtro. Veamos un ejemplo. Dados estos dos filtros:

Vue.filter("decimals", (value, decimals=2) => {
  return value.toFixed(decimals).toLocaleString();
});

Vue.filter("currency", (value) => {
  return value + " $";
});

En la vista puedes hacer:

{{ 0.342432 | decimals | currency }}

El código de arriba se ejecuta de izquierda a derecha, eso quiere decir, que el valor que pasamos entrará por el primer filtro formateándolo con dos decimales y ese valor pasará al filtro de la derecha haciendo que se añada la currency.

El resultado final será la suma de los dos filtros, es decir: 0.34 $

Librería de filtros recomendada

Si te quieres inspirar para crear filtros, esta librería contiene los filtros más comunes a usar en todos los proyectos. Incluye filtros para cambiar a mayúsculas, mínusculas, poner la primera letra mayúscula, porcentajes, placeholder en caso de que no venga valor, currency, filtrado de arrays, ordenación de arrays, etc:

Link del repo: https://github.com/freearhey/vue2-filters

Para usarlos recomiendo instalarlos con NPM:

npm install vue2-filters

Para que funcionen tienes que importarlos en el index.js:

// index.js
import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

Por último, si quieres usar algún filtro de los de ordenar o filtrar arrays, tienes que incluir esto en el componente en el que lo quieras usar:

import Vue2Filters from 'vue2-filters'

export default {
  ...
  mixins: [Vue2Filters.mixin],
  ...
}

Yo estos son los filtros que recomiendo en la mayoría de proyectos, aunque lo más recomendable es que crees los tuyos propios.

Conclusiones

Como ves los filtros son muy sencillos de usar y facilitan mucho la vida. A mi me son especialmente útiles sobre todo para representar fechas. Yo, personalmente lo que suelo hacer casi siempre es crear un filtro para las fechas con un un formato por defecto de tal forma que todas las fechas de la web se representen de la misma manera.

En próximos capítulos echaremos un vistazo a los mixins, que permiten tambien ahorrar código pero más a lo bestia.