Creating a currency mask in vuetify 2 and v-mask

Question

I am currently using the cdn version of v-mask for my vuetify 2 project. I have been asked to add a currency mask since here in the United States we tend to use thousandth digit comma separation. I am struggling to get it to work though as my range of numbers can be anywhere from the tens of thousands to the hundred billions. I figured I could just use v-mask with the mask amount to be a catch all but it seems to draw an error. Here is my implementation:

  <v-text-field
    v-model="totalDollarAmount"
    v-mask="'###,###,###,###,###.##'"
    label="(4) Total Dollar Amount"
    type="number"
    prefix="$"
    outlined
    required
    :rules="[(v) => !!v || 'Total Dollar Amount is required']"
    :error-messages="totalDollarAmountWarning"
  ></v-text-field>

The error it generates is as follows:

v-mask.min.js:1 The specified value "758,850,000," cannot be parsed, or is out of range.

The issue is the value may not occupy all the ### and therefore is drawing the error. This might need to be dynamic by dividing by 1000 or using modulus somehow but this seems overlycomplicated.

Answer 1

TL;DR; >>> Static mask could have been replaced with dynamic mask function, but in Vuetify's case it does not work. A viable solution might be to introduce a wrapper around v-text-field inspired by vuetify-mask project.

I have originally suggested to drop type="number" and it would work with simple <input /> [1]. Dynamic mask has proven to work for manual inputs, but fail to load value from the API or any other async function.

I have played a bit with v-text-field-money and the only issue with it's current implementation is that it seems to expect a string with fraction digits. As a workaround we could use Intl to format the value used by the component.

totalDollarAmount = Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  useGrouping: false
}).format(valueFromAPI);