Inputmask not working with Vue.js

[AdrianKuriata]

Hi, maybe this is my fault, but when i trying use inputmask into Vue element, it is not working. If i copy code, and put it out of Vue element, everythink working perfectly. I installed inputmask with npm. I tried use it like a class and attribute into html code, but not working. Do someone have some idea why this is not working?

[RobinHerbots]

@AdrianKuriata ,

It is possible to create a little example of your setup.

I haven't used vue.js yet, so I can only help if you give as much context as possible.

[AdrianKuriata]

@RobinHerbots

Hi, i did a solution with Vue Directives. I don't know what with v1.0 vue, but this working with Vue v2.

//Inputmask
window.Vue = require('vue');
window.Inputmask = require('inputmask');

Vue.directive('input-mask', {
    bind: function(el) {
        new Inputmask({
            mask: $(el).attr('mask'),
        }).mask(el);
    },
});

You need to put new directive which let you use your plugin with Vue.js

HTML example:
<input type="text" v-input-mask mask="(999) 999 999 99" />

v-input-mask is a attribute which is require to use mask attribute for create out regex mask. Into mask you can use your pattern for mask and this will working with Vue.js.

You can put it into readme or something for distplay information how did it for Vue.

Best Regards
Adrian Kuriata

[RobinHerbots]

This should also work

//Inputmask
var Vue = require('vue');
var Inputmask = require('inputmask');

Vue.directive('input-mask', {
    bind: function(el) {
        new Inputmask().mask(el);
    },
});

HTML example:

<input type="text" v-input-mask data-inputmask-mask="(999) 999 999 99" />

[AdrianKuriata]

Yes, working too, i tested it. I working with inputmask few days so your code has better quality!

[luizvnasc]

It's not working when I use numeric mask with placeholder in optional fields. If I I change a field but want it empty the model keeps the placeholder.

[AdrianKuriata]

Put a initial code for input mask in mounted lifecycle, should work.

[thearabbit]

Work fine for me, I base on Element UI

// main.js
import Inputmask from 'inputmask'
Vue.directive('inputmask', {
  bind: function(el, binding) {
    var inputs = el.getElementsByTagName('INPUT')
    var input = inputs[0]
    if (inputs.length > 1) {
      input = inputs[inputs.length - 1]
    }
    new Inputmask(binding.value).mask(input)
    // new Inputmask({
    //   autoUnmask: true,
    // }).mask(input)
  },
})

Usage

<el-input
          v-model="inputMask"
          v-inputmask
          :data-inputmask="maskOpt"
        />
--------
data(){
  return {inputMask: 0, maskOpt: "'alias' : 'currency', ''digits' : 2"}
}

But don't work with min, max options

[thearabbit]

Now I have problem on decimal number
Ex: Format 0.000

• when I type 0.[cursor]00, the cursor load to ending (0.100[cursor])

[cyhwinner]

oncomplete method not fire when use vue directives @thearabbit @RobinHerbots
{ oncomplete: this.completeFunc }
completeFunc() {
   console.log('enter') // not enter
   this.$emit('complete');
},
directives: {
  inputmask: {
   bind(el, binding, vnode) {
    const that = vnode.context;
    Inputmask(that.typeMap[that.maskType], that.finalOpt)
    .mask(el.getElementsByTagName('input')[0]);
   }
  }
 },

[redochka]

@cyhwinner i don't know if this fiddle is related to your issue but there is clearly a problem with vuejs model.

https://jsfiddle.net/0nwp8d2o/6/

The fiddle shows that inputmask is preventing the model data update!

[cyhwinner]

@cyhwinner i don't know if this fiddle is related to your issue but there is clearly a problem with vuejs model.

https://jsfiddle.net/0nwp8d2o/6/

The fiddle shows that inputmask is preventing the model data update!

thanks ，I have already solved it, but I still thank you.

[jcserracampos]

@cyhwinner how did you fix data not updating?

[cyhwinner]

@jcserracampos you can use Vue.directive to update data, like @thearabbit the demo code

[redochka]

@jcserracampos there is clearly a problem with vuejs model.

https://jsfiddle.net/0nwp8d2o/6/

The fiddle above shows that inputmask is preventing the model data update.

[adlerdias]

@RobinHerbots

we can close this one too.
it's working fine on latest beta.
https://jsfiddle.net/adlersd/svbzcd37/