How to automatically add thousands separators during input?

[Thomas-1985]

Hi

I would like to use this component to be able to format the input for a currency right when the user puts in data (according to the app locale) because Vuetify (the framework that i use for my app) doesn't provide such functionalitry.

So when the user with the "de" locale puts in 5000, this should be displayed as 5.000

If a user with the "en" locale puts in 5000, this should be displayed as 5,000

The key here is that its displayed on the fly, in all examples that i found it will only be converted if the user clicks somewhere else but on the input field

No fraction should be displayed and the v-model should be an integer - also no negative values should be allowed

How can this be achieved?

Best,
Thomas

[dm4t2]

Hi, you can use the following options in this case:

{
  currency: 'EUR',
  hideCurrencySymbolOnFocus: false,
  hideGroupingSeparatorOnFocus: false,
  precision: 0,
  valueRange: { min: 0 },
}

Vuetify 3 example: https://stackblitz.com/edit/vue-currency-input-vuetify-3-dh7gm2?file=src%2Fcomponents%2FVCurrencyField.vue