Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to do masked input in Vuetify?

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?

like image 638
Javid Ahadov Avatar asked Jun 24 '20 06:06

Javid Ahadov


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.

like image 163
Alexander Shkirkov Avatar answered Nov 07 '22 19:11

Alexander Shkirkov