How do I format currencies in a Vue component?

Question

My Vue component is like this :

<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

26000000

But I want format it to be like this :

26.000.000,00

In jquery or javascript, I can do it

But, How to do it in vue component?

Answer 1

I have created a filter. The filter can be used in any page.

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

Then I can use this filter like this:

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

I used these related answers to help with the implementation of the filter:

• How to format numbers as currency strings
• Check whether variable is number or string in JavaScript

Answer 2

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

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

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

And then in 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> 

BTW - I didn't put too much care on replacing and regular expression. It could be improved.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, ',');  });