VueJS Number Formats real time seperate by comma when Input Intl.NumberFormat

Question

I'm a beginner and I want to display Currency sign and seperate using comma when inserting the number input at the same time. I wrote this as I understand. So far no good. Anyone knows how ? Thanks

<template>
  <div id="app">
    <input
      type="text"
      id="cost"
      v-model="cost"
      @input="dd"
      name="cost"
      class="form-control form-control-md"
      placeholder="Enter cost of construction"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cost: "",
    };
  },
  methods: {
    dd() {
      var number = this.cost;

      new Intl.NumberFormat("en-EN", {
        style: "currency",
        currency: "USD",
      }).format(number);

      return number;
    },
  },
};
</script>

Iyashi · Accepted Answer · 2021-02-27 20:43:47Z

Sorry, a little late.

This is actually a crappy 5-min-put-together implementation of what you want to achieve. There are much better solutions out there and if you start using this, you'll soon notice its flaws.

But it should get you starting and help you get the gist of it.

new Vue({
  el: '#app',
  name: 'App',
  data() {
    return {
      cost: 0,
      formatLang: 'en-EN',
      formatStyle: 'currency',
      formatCurrency: 'USD'
    }
  },
  computed: {
    formatter() {
      return new Intl.NumberFormat(this.formatLang, {
        style: this.formatStyle,
        currency: this.formatCurrency
      })
    },
    formattedCost() {
      return this.formatter.format(this.cost)
    }
  }
})

label {
  position: relative;
}

label input {
  position: absolute;
  width: 0;
  height: 0;
  border: none;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <label @click="$refs.numberInput.focus()">
    <input ref="numberInput" type="number" v-model="cost" />
    <div class="formatted">{{ formattedCost }}</div>
  </label>
</div>

Devin Y · Accepted Answer · 2021-02-14 14:04:00Z

0

I found a method.

  dd()
        {
            if (this.cost != '') {
                var num = this.cost;
                
                

               num =  new Intl.NumberFormat('en-EN',  {
                    style: 'currency',
                    currency: 'USD',
                    }).format(num);
                        
                this.cost = num;
            }
        }

Now after input it shows currency symbol and separate using commas. One problem is when editing input value It shows NaN otherwise It's fine . Tell me if anyone know how to resolve that issue. Thanks in advance

answered Feb 14, 2021 at 14:04

Devin Y

1372 silver badges18 bronze badges

2 Comments

Iyashi Over a year ago

Your problem is that you try to use a formatted number (string) as a number again. Number('USD 123.45') will return NaN because it cannot convert 'USD' to a number. You need 2 variables. The actual num (e.g. this.numCost) and the formatted string representation of num => this.cost. Then you have to use this.numCost in Intl.NumberFormat

Devin Y Over a year ago

Thanks for replying. I did understand some points. Earlier the cost data property displayed as '10000' but now it shows '$10000.00' . So it cannot be saved into database as decimal value .Because I assigned the value to v-model. Could you please explain me by writing the code If you got time. Thank you very much

Collectives™ on Stack Overflow

VueJS Number Formats real time seperate by comma when Input Intl.NumberFormat

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related