How to use mask in vuetify text-field?

Question

I'm trying to use the mask property of text-field component, like the example below. In the view, that works like a charm, but, when the form is posted, the mask format does not keep the value.

For example, when I type "000.000.000-00", the value that the form posted was "00000000000". How can I keep the format value?

<v-text-field
  :value="currentValue" 
  @input="handleInput"
  :mask="###.###.###-##"/>

Answer 1

In Vuetify 2 masks have been removed

---

Answer for Vuetify versions < 2.0.0

You can use return-masked-value prop

<v-text-field
    :value="currentValue" 
    return-masked-value
    mask="###.###.###-##"
    @input="handleInput"
></v-text-field>

---

Note that currently in v0.17 there is a bug with returning unmasked initial value.

Answer 2

With Vuetify 2 they removed the mask attribute. However, there is a third-party solution. You can use the lightweight package v-mask by probil:

Install the v-mask package (unpacked size 71.7 kB)

npm install v-mask

In your main.js import the package and add it as a directive:

import { VueMaskDirective } from 'v-mask'
Vue.directive('mask', VueMaskDirective);

Then in your component add the mask using v-mask:

<v-text-field
  v-mask="'###.###.###-##'"
  :value="currentValue" 
  @input="handleInput"
/>