Problems using v-mask (Vue.JS)

Question

Problems using v-mask (Vue.JS)

Wanted to use a mask in some componentized inputs, but it doesn't work, follow the respective code snippets: no 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 nas props:

mask: {
    required: false,
    type: String
  }

And finally when I try to use this component with such mascara:

<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 just is not applied.

0

javascript vue.js vue.js-2

Author: João, 2019-04-09

Source

1 answers

score 2 · Accepted Answer

You are trying to use the v-mask directive but you are importing the plugin and not the directive.

Here is a working example:

Main.js

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

Component.View

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

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

Https://codesandbox.io/s/olrkol8qk6