CODEWITHSUNDEEP
vue.jsvuetify.js
Marcelo Júnior
Marcelo Júnior

Reputation: 445

How to use mask in vuetify text-field?

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

Upvotes: 26

Views: 69072

Answers (2)

Traxo
Traxo

Reputation: 19012

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.

Upvotes: 29

Marcello B.
Marcello B.

Reputation: 4440

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

Upvotes: 23

Related Questions