Question 52780 in Javascript Question posted in
A very good W3school tutorial can be found here.

Use Maska input mask with Vuetify 3 text-field – Javascript

I’m using Vuetify 3 and Maska, which provides masking of input values. I need to put a mask for phone numbers on v-text-field.

The documentation describes how it works with a regular HTML input element, but I need to put the mask on the Vuetify v-text-field component. How to do it?

I tried:

  <v-text-field
    label="Телефон"
    variant="solo"
    class="mt-3"
    clearable
    v-maska data-maska="+7(###)-###-##-##"
    v-model="form.phone"
    :error-messages="v$.form.phone.$errors.map(e => e.$message)"  
  ></v-text-field>

but it is not working. I have registered the directive with:

directives: { maska: vMaska }
Tags:

2

Answers


  1. 0

    I don’t see an option in the documentation, where you can change the event and value processed by the Maska directive, and as you said, it does not seem to work with regular modelValue/@update:modelValue.

    But you can use Maska programmatically and mask the input and unmask the output to v-text-field.

    Just create a mask instance with

    const mask = new Mask({ mask: '+7(###)-###-##-##' })

    and in your v-text-field, replace v-model with updated in- and output:

          <v-text-field
        label="Телефон"
        :model-value="mask.masked(phone)"
        @update:model-value="value => phone = mask.unmasked(value)"
      ></v-text-field>

    (Again, make sure to remove v-model)

    It works in the snippet:

    const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const { Mask } = Maska
const vuetify = createVuetify()
const app = {
  setup(){
    return {
      phone: ref('123'),
      mask: new Mask({ mask: '+7(###)-###-##-##' }),
    }
  }

}
createApp(app).use(vuetify).mount('#app')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-text-field
        label="Телефон"
        variant="solo"
        class="mt-3"
        clearable
        :model-value="mask.masked(phone)"
        @update:model-value="value => phone = mask.unmasked(value)"
      ></v-text-field>
      Number: {{phone}}
   </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify-labs.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maska@2/dist/maska.umd.js"></script>
    Login or Signup to reply.
  2. 0

    I had the same issue and solved it like this:

    <script setup>
import {ref} from "vue";
import { vMaska } from "maska";

const options = { mask: '#-#' };
const myValue = ref('');
</script>

<template>
  <div>
    <v-text-field v-maska:[options] v-model="myValue"/>
  </div>
</template>

    Hope it helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search