vuejs separate money with comma and period

Question

Hello, in vuejs I want to separate amounts with commas and periods, how can I do this using a filter?

I wish the currency was like this.

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

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

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

Answer 1

A simple solution is to have the filter output HTML:

The filter can be written like this:

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] + ',' + arr[1] + '';
});

Link:

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

See also StackOverflow questions:
VueJS2 v-html with filter