CODEWITHSUNDEEP
vue.js
Tuana
Tuana

Reputation: 35

vuejs separate money with commas and periods

hello in vuejs I want to separate the amount of money with a comma and a period, how can I do it with filter?

I want the currency to be like this.

<p>1.000<span>,00</span></p>

Styling to be applied

I want the part separated by comma to be gray like in the image

Vue.filter('toTL', function (value) {
    return new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
});

Upvotes: 1

Views: 1042

Answers (1)

Peter Pointer
Peter Pointer

Reputation: 4160

An easy solution would be to let the filter output the HTML:

<p class="amount" v-html="$options.filters.toTL(attributes.gross_total)" />

The filter can be written like so:

Vue.filter('toTL', function (value) {
    let formatted = new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
    let arr = formatted.split(',');

    return arr[0] + '<span>,' + arr[1] + '</span>';
});

Links:

String.prototype.split documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

Also see this StackOverflow question:
VueJS2 v-html with filter

Upvotes: 2

Related Questions