Introducción

Vue.js es un framework poderoso pero liviano. Por lo tanto, no viene con cosas innecesarias, los filtros son un ejemplo de ello. En las aplicaciones que desarrollamos, no siempre necesitaremos el filtro currency o de dinero.

Pero habrá algunas ocasiones en las que sí lo necesitaremos, ¿y para qué reinventar la rueda, si alguien más ya lo hizo por nosotros? así que hoy veremos cómo utilizar el filtro de moneda en VueJS.

Instalar filtro

Esto es muy fácil. Simplemente instalamos el filtro que está aquí en GitHub. En mi caso lo haré con NPM.

Para ello, ejecutamos lo siguiente:

npm install --save vue-currency-filter

Estamos listos para utilizarlo.

Registrar filtro

Ahora le tenemos que decir a VueJS que lo utilice. En nuestra app lo importamos y registramos:

import VueCurrencyFilter from 'vue-currency-filter'
Vue.use(VueCurrencyFilter)

Listo. Ahora podemos usarlo en nuestra vista.

Configurar filtro

Por defecto, el filtro convierte algo como “589623.54” en “$ 589.624”. Si utilizamos euros, un distinto separador o cosas de esas podemos crear una configuración global al registrarlo. Para ello, pasamos un objeto como segundo argumento. Así:

Vue.use(VueCurrencyFilter,
{
  symbol : '$',
  thousandsSeparator: '.',
  fractionCount: 2,
  fractionSeparator: ',',
  symbolPosition: 'front',
  symbolSpacing: true
})

En mi caso, necesito que se filtre como en mi país se hace. En donde algo como “5369.22” se convierte en “$5,369.22” así que…

Vue.use(VueCurrencyFilter, {
  symbol: '$', // El símbolo, por ejemplo €
  thousandsSeparator: ',', // Separador de miles
  fractionCount: 2, // ¿Cuántos decimales mostrar?
  fractionSeparator: '.', // Separador de decimales
  symbolPosition: 'front', // Posición del símbolo. Puede ser al inicio ('front') o al final ('') es decir, si queremos que sea al final, en lugar de front ponemos una cadena vacía ''
  symbolSpacing: true // Indica si debe poner un espacio entre el símbolo y la cantidad
})

Utilizar filtro

Finalmente, en nuestra vista podemos utilizarlo. En mi caso lo implementé en una tabla:

<td class="sueldo-empleado">{{sueldoDelEmpleadoConElIndice(i) | currency}}</td>

Lo que da este resultado:

Y con eso terminamos por hoy.

Acceder a los filtros de VueJS desde el código Javascript

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…

abril 30, 2018

En "javascript"

Formatear moneda o dinero en Golang

Introducción Hoy veremos cómo formatear un número en Go de manera que se pueda representar como moneda o dinero. En otras palabras, veremos cómo convertir un número (como 1523.625) en una cadena como $1, 523.62. Si quieres saber cómo hacerlo con VueJS aquí dejo un tutorial para ver cómo filtrar…

mayo 22, 2018

En "Go y Golang"

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.…

agosto 15, 2019

En "HTML"