How to automatically insert a comma into numbers as you type in Vue.js

Question

How to automatically insert a comma into numbers as you type in Vue.js

I am trying to insert separators in my numbers as I type, but for some reason it is not working.

Sample Code

<el-input-number v-model="form.qty" style="width: 100%;" id="test" placeholder="Quantity" controls-position="right" v-on:keyup="handleChange" :min="1"></el-input-number>

methods: {
    handleChange: function(value) {
        let vm = this;
        console.log(value);
        const result = value.toString().replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            Vue.nextTick()
            .then(function () {
                vm.form.qty = result
            });
    },
}

https://i.sstatic.net/e82hM.png

Problem

Currently, when I enter numbers, no commas are added to the input field, however, when the values are sent to the back-end, they include commas.

Solution Needed

I actually need the opposite behavior from what I described earlier.

Show numbers with commas in the user interface
Send numbers without commas to the back-end

Any suggestions?

javascript vue.js vuejs2

Answer 1

Answer №1

I believe the issue here is related to reactivity, consider using $set instead of = in your code.

handleChange(value) {
        console.log(value);
        let vm = this;
        let res = value.toString().replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        console.log(res)
        this.$set(this.form,'num',res);

      }

Fiddle - https://jsfiddle.net/PratikPatel227/tLx3z96a/28/

when sending data remember to use - this.form.num.replace(/,/g, '')

Answer 2

I believe the issue here is related to reactivity, consider using $set instead of = in your code.

handleChange(value) {
        console.log(value);
        let vm = this;
        let res = value.toString().replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        console.log(res)
        this.$set(this.form,'num',res);

      }

Fiddle - https://jsfiddle.net/PratikPatel227/tLx3z96a/28/

when sending data remember to use - this.form.num.replace(/,/g, '')

Answer 3

Answer №2

I am not familiar with ElementUI, so I cannot guarantee that the el-input-number component will accept a formatted string as its value input. It is possible that the component internally removes all non-numeric characters from the value prop. However, the following solution is tailored for standard text inputs.

To display a different value than what is stored, you will need to break down the v-model directive into its original components. v-model actually combines binding the value and handling the @input event in one directive. You should keep the unformatted number in your form.qty field, but provide the el-input-number component with the formatted number through a computed property, like this:

<template>
  <!-- INSTEAD OF v-model, use :value and @input -->
  <el-input-number :value="formattedQty" @input="handleQtyInput" />
</template>

<script>
export default {
  data () {
    return {
      form: {
        qty: "0",
      }
    }
  },

  computed: {
    formattedQty () {
      // Add back commas to the string
      let qty = this.form.qty + ""
      return qty.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  },

  methods: {
    handleQtyInput (newValue) {
      // Ensure the stored quantity is not formatted
      this.form.qty = newValue.toString().replace(/\D/g, "")
    }
  }
}
</script>

Answer 4

I am not familiar with ElementUI, so I cannot guarantee that the el-input-number component will accept a formatted string as its value input. It is possible that the component internally removes all non-numeric characters from the value prop. However, the following solution is tailored for standard text inputs.

To display a different value than what is stored, you will need to break down the v-model directive into its original components. v-model actually combines binding the value and handling the @input event in one directive. You should keep the unformatted number in your form.qty field, but provide the el-input-number component with the formatted number through a computed property, like this:

<template>
  <!-- INSTEAD OF v-model, use :value and @input -->
  <el-input-number :value="formattedQty" @input="handleQtyInput" />
</template>

<script>
export default {
  data () {
    return {
      form: {
        qty: "0",
      }
    }
  },

  computed: {
    formattedQty () {
      // Add back commas to the string
      let qty = this.form.qty + ""
      return qty.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
  },

  methods: {
    handleQtyInput (newValue) {
      // Ensure the stored quantity is not formatted
      this.form.qty = newValue.toString().replace(/\D/g, "")
    }
  }
}
</script>

How to automatically insert a comma into numbers as you type in Vue.js

Sample Code

Problem

Solution Needed

Answer №1

Answer №2

Similar questions

What is the best way to incorporate a sidebar menu in an HTML webpage?

Vue dynamic components fail to re-render within a v-for loop upon data changes

Issue with Camera inversion not functioning properly in THREE.js with 1 Renderer and 2 Viewports

Is it possible to create a looped GLTF animation in three.js using random time intervals?

Executing a jQuery function only once per click on a select element - how can it be done?

Prevent the execution of a Javascript function if it is already in progress

What is the number of steps jQuery animates in?

What is the reason behind WP AJAX consistently returning a value of 0?

How do I adjust the controls in Three.js to align with the previous camera position?

Can you utilize the dotenv EJS file effectively?

What is the reason behind the failure of next/script with Google reCAPTCHA?

maximum number of results in google custom search limit

Extract the color of an individual character

Adding items to a JSON document

Unable to display SVG icon in Highcharts rendering

Importing a JavaScript file into another JavaScript file

Is there a way to transfer a value from one JS function to another in Node.js?

How can I make the lines of my drawer thicker in Material UI?

Error: Unable to render followers list due to incorrect data type

JavaScript functions flawlessly when run on a local machine, but encounters issues when transferred to a server