format currencies in a Vue component?

Question

Good day everyone, I'm trying to format the value that JSON brings me in currency, I saw some suggestions but I still can't convert the value. This is how I've my code structured

<template>
...
<div class="currency-selection">
   <input type="text" :value="conversionValue * cryptoQuantity " readonly />
...
<template>

<script>

export default {
    name: 'CurrencySelect',
    data: () => ({
        conversionValue: 0,
        cryptoQuantity: 1
}),
axios
            .get(
                "https://min-api.cryptocompare.com/data/price?fsym=btc&tsyms=COP"
            )
            .then((res) => {
                this.conversionValue = res.data.COP;
            })
            .catch((e) => {
                console.log(e);
            });
}

Right now the value is 169057977.17 but I want it to be displayed like this: 169.057.977,17

tauzN · Accepted Answer · 2022-04-01T17:10:47.260

You can use toLocaleString to format numbers acording to the language and region you define.

Use Number.toLocaleString('es-CO') get this: 169.057.977,17

See this for a list of supported locales

See this example

<script>
export default {
  data() {
    return {
      conversionValue: 0,
      cryptoQuantity: 1
    }
  },
  async mounted () {
    this.conversionValue = await fetch("https://min-api.cryptocompare.com/data/price?fsym=btc&tsyms=COP").then(raw => raw.json()).then(json => json.COP)
  }
}
</script>

<template>
<input type="text" :value="(this.cryptoQuantity * this.conversionValue).toLocaleString('es-CO')"/>
</template>

format currencies in a Vue component?

1 Answers1