Problems using v-Mask (Vue.JS)

Question

I wanted to use a mask on some componentized inputs, but it doesn’t work, it follows the respective code snippets: in main.js we have:

import VueMask from 'v-mask'
Vue.use(VueMask);

in my component, I have:

<input class="form-control input floating-input"
 @input="$emit('input',$event.target.value)"
 :value="value"
 v-bind="$attrs" 
 :type="tipo"
 v-mask = mask
 :placeholder="placeholder" /> 

and in the props:

mask: {
    required: false,
    type: String
  }

and finally when I try to use that component with that mask:

<my-input tipo="text" placeholder=" " label="Telefone" 
  mask="(##) ####-####"
  v-model="empresa.phone"
  v-validate="'required'"
  data-vv-name='tel'>
</my-input>

Strangely nothing happens, no errors in the console, the mask is just not applied.

Answer 1

Are you trying to use the directive of v-mask but is importing the plugin and not the directive.

Here’s an example working:

main.js

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

Component.Vue.

<template>
  <input v-mask="mask" v-model="phone">
</template>

<script>
export default {
  data() {
    return {
      mask: "(##) ####-####",
      phone: "4140028922"
    };
  }
};
</script>

https://codesandbox.io/s/olrkol8qk6

Answer 2

Try this if the field is for Phone or Mobile:

<template>
  <input v-mask="maskTel()" v-model="phone">
</template>

<script>
export default {
  data() {
    return {
      phone: "" // 4140028922 ou 41940028922
    };
  }, 
  methods: {
    maskTel() {
     if(!!phone) {
       return this.phone.length == 15 ? '(##) #####-####' : '(##) ####-#####'
     } else {
       return '(##) #####-####'
     }
  }
};
</script>
```