Vuetify

Vuetify Alert fade after a duration Vuetify Login Form Vuetify Toast Snackbar Demo Vuetify Disable Past Date in DatePicker Vuetify Scrollable Dialog Vuetify Dialog to Confirm Delete Vuetify input File get Selected file name Vuetify validate textarea character limit Vuetify V-Select multiple example Vuetify Checkbox Check All | Uncheck All Example Vuetify Disable Button for Certain Amount of Time Vuetify Validate Email Field Vuetify Change Button Color if Button active or selected Vuetify Change color of v-chip on click Vuetify Image Upload with Preview Vuetify Clear text field using ref Vuetify Disable Future date in Datepicker Vuetify Set Current Date in Datepicker Vuetify rule for Number Between 0 and 999 or no input Vuetify Validation Rule: Allow Empty String or Specific Number of Characters Vuetify Allow only alphanumeric characters in textfield Vuetify Rule Input Text only Accept Number and Dot Vuetify set Confirm Password Validation Rule in text-fields Vuetify Text Field Allow 10 digit Number Vuetify Add Comma to Input Field Automatically Vuetify Check if input contains special characters

Vuetify Add Comma to Input Field Automatically

Vuetify is a popular Vue.js framework that allows developers to create modern and responsive user interfaces. In this post, we will discuss how to automatically add commas to input fields and format numbers as (USA) currency and (INR) currency in Vuetify text fields

written

reviewed

updated

Adding Commas to Input Fields and Formatting Numbers as (USA) Currency

In the first example, we have a Vuetify text field for entering an amount. We want to add commas to the number as the user types and format it as (USA) currency. Here's the code snippet:

Vuetify Format Numbers as (USA) currency in Text Field

 <v-text-field prepend-inner-icon="mdi-currency-usd" clearable 
 label="Amount"v-model="numberValue" @input=" formatNumber"></v-text-field>
   <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data() {
                return {
                    numberValue: ''
                };
            },
            methods: {
               formatNumber() {
                    // Remove non-numeric characters and format the number with commas
                    this.numberValue = this.numberValue.replace(/[^0-9]/g, '');
                    this.numberValue = new Intl.NumberFormat('en-US').format(parseInt(this.numberValue, 10));
                }
            }
        });
    </script>

Run

We have also included a @input event listener that triggers the formatNumber method. Here's the JavaScript code for formatting the number

The formatNumber method replaces non-numeric characters with an empty string, ensuring that only numbers are considered. Then, it uses the Intl.NumberFormat to format the number as (USA) currency with commas.

Pasted Image

Adding Commas to Input Fields and Formatting Numbers as (INR) Currency

In the second example, we have another Vuetify text field for entering an amount, but this time we want to format the number as (INR) currency. Here's the code snippet:

Vuetify Format Numbers as (INR) Currency in Text Field

 <v-text-field prepend-inner-icon="mdi-currency-inr" clearable label="Amount"
 v-model="numberValue" @input=" formatNumber"></v-text-field>
 <script>
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data() {
                return {
                    numberValue: ''
                };
            },
            methods: {
               formatNumber() {
                    // Remove non-numeric characters and format the number with commas
                    this.numberValue = this.numberValue.replace(/[^0-9]/g, '');
                    this.numberValue = new Intl.NumberFormat('en-in').format(parseInt(this.numberValue, 10));
                }
            }
        });
    </script>

Run

Just like in the previous example, we have included a @input event listener that triggers the formatNumber method. Here's the JavaScript code for formatting the number as (INR) currency:

Similarly, the formatNumber method removes non-numeric characters and then uses Intl.NumberFormat to format the number as (INR) currency with commas