v-text-field formatting numbers with thousands separators

[MrGonzo1024]

Hi,

I apologize if this was asked before, but I searched and couldn't find the answer. I am using Nuxt 3 with Vuetify 3, and I would like to use the v-text-field to capture numbers but display the numbers formatted when the user tabs away from the field. For example, if the user entered 10000000, then have it display 10,000,000 when the user tabs away. I would still need the v-text-field to capture the numeric value though. I have it bound to a variable with v-model so I can't just change the value to a text formatted representation with the field loses focus.

Also, I looked for some solutions online, and found a couple but they are not compatible with Vuetify 3.

Any ideas?

[yuwu9145]

You could get help from some text mask library e.g. https://github.com/beholdr/maska

[MrGonzo1024]

NM. I got it to work! Well at least the simple one. Here's what I did...

<script setup>
   import { vMaska } from "maska";

   const options = { mask: '#-#' };
   const value = ref('');
</script>

<template>
   <v-text-field v-model="value" v-maska:[options] />
</template>

I'm going to try the full blow currency one and report back

[MrGonzo1024]

Thanks again @yuwu9145 !

[yuwu9145]

This works for me

<script setup>
   import { vMaska } from "maska";
   import { ref } from "vue";

   const options = { 
    mask: '9,99#.##',
    tokens: {
      9: { pattern: /[0-9]/, repeated: true },
    },
    reversed: true
  };
   const value = ref('');
</script>

<template>
   <v-text-field v-model="value" v-maska:[options] />
</template>

Basically, vuetify assigns "data-" attributes to root as opposed to input tag, so rely on v-maska directive and avoid using "data-maska-*" attributes shall be working well with v-text-field

[MrGonzo1024]

Thanks again!! This works well! But a question. I have the v-model = to a numeric variable in an object, that's later used calculations. Looks like this field now stores the formatted string instead of the numeric value. So, I'll have to convert that back to a number. That's not a big deal, but there's no way to have the component do it automatically. Right?

[MrGonzo1024]

Hi everyone. Thanks again for your help! I ended up using v-maska with the following for the options...

const options = {
            tokens: "0:\d:multiple|9:\d:optional",
            preProcess: val => val.replace(/[$,]/g, ''),
            postProcess: val => {
                if (!val) return '';
                const realval = Number(val);
                const retval = realval.toLocaleString('en-US',{ maximumFractionDigits: 2 });
                if (val.includes('.'))
                    if (val.indexOf('.') == val.length-1)
                        retval = retval + ".";
                return retval
                }
            }

It's based on the "full money" example. In my case, the decimal point is optional, so this adds the commas as the user enters the numbers and uses the decimal only if the user enters a decimal.

[KaelWD]

I've used https://www.npmjs.com/package/vue-imask

[MrGonzo1024]

Thanks @KaelWD I'll check it out!

[laventnc]

this works great, and easy to setup
https://github.com/dm4t2/vue-currency-input