¿Cómo formateo monedas en un componente de Vue?

Solución:

He creado un filtro. El filtro se puede utilizar en cualquier página.

Vue.filter('toCurrency', function (value) {
    if (typeof value !== "number") {
        return value;
    }
    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0
    });
    return formatter.format(value);
});

Entonces puedo usar este filtro así:

        <td class="text-right">
            {{ invoice.fees | toCurrency }}
        </td>

Usé estas respuestas relacionadas para ayudar con la implementación del filtro:

• ¿Cómo formatear números como cadena de moneda?
• Compruebe si la variable es un número o una cadena en JavaScript

ACTUALIZACIÓN: sugiero usar una solución con filtros, proporcionada por @Jess.

Escribiría un método para eso, y luego, cuando necesite formatear el precio, puede simplemente poner el método en la plantilla y pasar el valor

methods: {
    formatPrice(value) {
        let val = (value/1).toFixed(2).replace('.', ',')
        return val.toString().replace(/B(?=(d{3})+(?!d))/g, ".")
    }
}

Y luego en plantilla:

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ formatPrice(item.total) }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

Por cierto, no puse demasiado cuidado en el reemplazo y la expresión regular. Podría mejorarse.enter code here

Vue.filter('tableCurrency', num => {
  if (!num) {
    return '0.00';
  }
  const number = (num / 1).toFixed(2).replace(',', '.');
  return number.toString().replace(/B(?=(d{3})+(?!d))/g, ',');
});

Con vuejs 2, puede usar filtros vue2 que también tienen otras ventajas.

npm install vue2-filters


import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

Entonces úsalo así:

{{ amount | currency }} // 12345 => $12,345.00

Ref: https://www.npmjs.com/package/vue2-filters

---

---

Utiliza Nuestro Buscador