Introducción

Los filtros de Vue.js son muy útiles. Generalmente son utilizados sólo en la vista. Por ejemplo, si queremos filtrar moneda hacemos esto:

{{sueldo | currency}}

¿Pero qué pasa si queremos utilizar esos filtros en nuestro código javascript? recientemente me pasó que estaba generando un documento PDF con la magnífica librería jsPDF, pero para mostrar algunos montos necesitaba filtrarlos antes.

Así que me puse a pensar en cómo utilizar los filtros no sólo en la vista, sino también en la lógica. Y encontré la respuesta.

Utilizar filtros de VueJS en código Javascript

La respuesta viene del creador de este maravilloso framework. Una vez que hemos registrado nuestros filtros globalmente, podemos acceder a ellos desde this.$options.filters o desde Vue.options.filters.

Así que si tenemos un filtro llamado currency, podemos “importarlo” de la siguiente forma:

const {currency} = this.$options.filters;

Lo mismo para todos los demás filtros que hayamos registrado. Arriba estoy utilizando algo llamado desestructuración de objetos, o algo así. Pero sería lo mismo que escribir:

const currency = this.$options.filters.currency;

Finalmente, para utilizarlos, llamamos a la función y le pasamos argumentos:

let montoBonito = currency(monto);

En este caso fue para el filtro currency, pero podemos utilizarlo para cualquier filtro existente.