How do I format a currency in the Vue component?

Question

The My Vue component is as follows:

<template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> 

The result of {{ item.total }} is equal to

26000000

But I want the format to be like this:

26.000.000,00

In jquery or javascript i can do this

But how to do it in the vue component?

Answer 1

I would write a method for this, and then where you need to format the price, you can simply put the method in the template and pass the value down

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

And then in the template:

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

By the way, I didn't care too much about replacement and regex. It can be improved.

EDIT: I suggest using a solution with filters provided by @Jess.

Answer 2

I created a filter. The filter can be used on any page.

 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); }); 

Then I can use this filter as follows:

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

I used these related answers to help with filter implementation:

• How can I format numbers as a string of dollar currency in JavaScript?
• Check if a variable is a number or a string in JavaScript

Answer 3

With vuejs 2, you can use vue2 filters, which have other advantages.

 npm install vue2-filters import Vue from 'vue' import Vue2Filters from 'vue2-filters' Vue.use(Vue2Filters) 

Then use it like this:

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

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

Answer 4

Comment by @RoyJ has a great suggestion. In the template, you can simply use the built-in localized strings:

 <small> Total: <b>{{ item.total.toLocaleString() }}</b> </small> 

It is not supported in some older browsers, but if you are targeting IE 11 and later, you should be fine.

Answer 5

You can format the currency by writing your own code, but for now this is just a solution - when your application grows, you may need other currencies.

There is another problem with this:

1. For EN-us - the dollar sign is always before the currency - $ 2.00,
2. For the selected PL, you return the character after the amount as 2.00 zł.

I think the best option is to use a comprehensive solution for internationalization, for example, the vue-i18n library ( http://kazupon.imtqy.com/vue-i18n/ ).

I use this plugin and I do not need to worry about such things. Please look at the documentation - it is really simple:

http://kazupon.imtqy.com/vue-i18n/guide/number.html

so you just use:

 <div id="app"> <p>{{ $n(100, 'currency') }}</p> </div> 

and install EN-us to get $ 100.00 :

 <div id="app"> <p>$100.00</p> </div> 

or set PL to get PLN 100.00 :

 <div id="app"> <p>100,00 zł</p> </div> 

This plugin also provides various functions such as translations and date formatting.

Answer 6

There are problems with the accuracy of the accepted answer.

the round (value, decimals) function in this test works. as opposed to a simple example.

This is a test of the toFixed vs round method.

http://www.jacklmoore.com/notes/rounding-in-javascript/

  Number.prototype.format = function(n) { return this.toFixed(Math.max(0, ~~n)); }; function round(value, decimals) { return Number(Math.round(value+'e'+decimals)+'e-'+decimals); } // can anyone tell me why these are equivalent for 50.005, and 1050.005 through 8150.005 (increments of 50) var round_to = 2; var maxInt = 1500000; var equalRound = '<h1>BEGIN HERE</h1><div class="matches">'; var increment = 50; var round_from = 0.005; var expected = 0.01; var lastWasMatch = true; for( var n = 0; n < maxInt; n=n+increment){ var data = {}; var numberCheck = parseFloat(n + round_from); data.original = numberCheck * 1; data.expected = Number(n + expected) * 1; data.formatIt = Number(numberCheck).format(round_to) * 1; data.roundIt = round(numberCheck, round_to).toFixed(round_to) * 1; data.numberIt = Number(numberCheck).toFixed(round_to) * 1; //console.log(data); if( data.roundIt !== data.formatIt || data.formatIt !== data.numberIt || data.roundIt !== data.numberIt || data.roundIt != data.expected ){ if(lastWasMatch){ equalRound = equalRound + '</div><div class="errors"> <hr/> Did Not Round UP <hr/>' ; document.write(' <h3>EXAMPLE: Did Not Round UP: ' + numberCheck + '</h3><br /><hr/> '); document.write('expected: '+data.expected + ' :: ' + (typeof data.expected) + '<br />'); document.write('format: '+data.formatIt + ' :: ' + (typeof data.formatIt) + '<br />'); document.write('round : '+data.roundIt + ' :: ' + (typeof data.roundIt) + '<br />'); document.write('number: '+data.numberIt + ' :: ' + (typeof data.numberIt) + '<br />'); lastWasMatch=false; } equalRound = equalRound + ', ' + numberCheck; } else { if(!lastWasMatch){ equalRound = equalRound + '</div><div class="matches"> <hr/> All Rounded UP! <hr/>' ; } { lastWasMatch=true; } equalRound = equalRound + ', ' + numberCheck; } } document.write('equalRound: '+equalRound + '</div><br />'); 

mixin example

  export default { methods: { roundFormat: function (value, decimals) { return Number(Math.round(value+'e'+decimals)+'e-'+decimals).toFixed(decimals); }, currencyFormat: function (value, decimals, symbol='$') { return symbol + this.roundFormat(value,2); } } }