How to use mask in vuetify text-field?
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.
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"
/>