How to do masked input in Vuetify?

Viewed 9908

Input mask is not working anymore in Vuetify 2.x. I wonder if there is any solution for making mask for v-input-text? Any idea how I can do it?

1 Answers

Vuetify masks are completely removed starting from version 2.0. The only way to get masks back is to take a look to third-party libraries.

By example, use v-mask this way:

In your main.js you could place:

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

And in your component:

...
<v-text-field
  v-model="loginItem.phone"
  v-mask="'(###) ###-####'"
></v-text-field>
...

You could also use vue-the-mask. This lib is also works, but not maintained by author anymore.

Related