0

I'm looking to creating a custom mask within the Vuetify material framework. The example given is as this:

<template>
  <v-card>
    <v-card-text>
      <v-text-field v-model="mask" label="Mask"></v-text-field>
    </v-card-text>
    <v-card-text>
      <v-text-field :mask="mask" v-model="value" label="Value"></v-text-field>
    </v-card-text>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      mask: 'credit-card',
    })
  }
</script>

So, somewhere the 'credit-card' mask is defined. However, let's say I want to replace this with a custom made mask...to match on very niche regular expression...

My custom expression would also contain values that must not change, e.g., I need the letter "X" followed by any alphabetical letter (capital only), followed by "-AW-" followed by any 6 numerical digits...so following something like this Veutified masking pattern:

"X" A -"AW"- ######

Where:

A   Any capital letter
#   Any digit

Does anyone know how this could theoretically be done?

  • Looking at the docs not possible. Why not just have 2 seperate fields. Letter and then number. Since the X and -AW- are constants... –  Aug 23 '18 at 15:43
  • @JohnM Hi John - dang, might be worth requesting it with them on their GitHub issue tracker. Yeh just would be nice to have a more elegant solution...but I think that’s the road I’ll go down of two separate fields. –  Aug 23 '18 at 15:47
  • The answer is in the following post: [How to use mask in vuetify text-field?](https://stackoverflow.com/questions/47857673/how-to-use-mask-in-vuetify-text-field) – Nelson Cravo Junior May 02 '19 at 14:50

0 Answers0