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="###.###.###-##"/>

score 29 · Accepted Answer · edited Jul 27 '20 at 16:45

29

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.

edited Jul 27 '20 at 16:45

Marcello B.

4,177
11
45
65

answered Dec 17 '17 at 17:45

Traxo

18,464
4
75
87

10

mask is not suported and removed from library from vue 2.0.0 – Piotr Żak Aug 08 '19 at 14:58
2

@zaqpiotr this related to Vuetify, not Vue itself. Vuetify is supporting mask: https://vuetifyjs.com/en/components/text-fields#masks-using-vue-the-mask, https://v15.vuetifyjs.com/en/components/text-fields#masks – escapedcat Sep 12 '19 at 14:37
3

@escapedcat zaqplotr is right. Seems there is a new addon vue-the-mask now! – sureshvv Oct 13 '19 at 06:18
1

apparently vuetify 2 really doesn't support masks for some reason. – Otorrinolaringologista -man May 15 '20 at 13:17

Marcello B. · Answer 2 · 2020-07-26T15:36:59.123

19

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"
/>

edited Jul 26 '20 at 15:36

answered Jul 26 '20 at 05:12

Marcello B.

4,177
11
45
65

How to get unmasked value from this? – Cak Bud Oct 19 '21 at 02:50
@AhmadBudairi it does not appear to be possible at this time: https://github.com/probil/v-mask/issues/42 – Marcello B. Oct 19 '21 at 02:53

How to use mask in vuetify text-field?

2 Answers2

In Vuetify 2 masks have been removed

Answer for Vuetify versions < 2.0.0

Linked