Inputmask: Changes are not reflected back to model when using with Vue2

[huksley]

Changes are not reflected back to model

Declaring directive

Vue.directive('input-mask', {
  bind: function(el, o, v) {
     $(el).inputmask();
  }
});

Declaring control

<input type="text" class="form-control" name="code"
placeholder="Enter code" v-model="code"
v-input-mask data-inputmask="'mask': '9999999999[9][9]', 'greedy' : false">

Description of problem

Mask is applied correctly. However when I modify value in form changes are not saved in model. Not on keypress not on blur.

[RobinHerbots]

Use the vanilla dependencylib instead of jquery.

Op za 17 dec. 2016 14:10 schreef Ruslan Gainutdinov <
[email protected]>:

Changes are not reflected back to model Declaring directive

Vue.directive('input-mask', {
bind: function(el, o, v) {
$(el).inputmask();
}
});

Declaring control

placeholder="Enter code" v-model="code"
v-input-mask data-inputmask="'mask': '9999999999[9][9]', 'greedy' : false">

Description of problem

Mask is applied correctly. However when I modify value in form changes are
not saved in model. Not on keypress not on blur.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/RobinHerbots/Inputmask/issues/1468, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AATb75IB7_jq3KzMensuGRuH3mvhueRhks5rI98hgaJpZM4LP4i-
.

[huksley]

Sorry, maybe I don`t understand dependency mechanism to its fullest, but there is no inputmask.dependencyLib.js
not in releases not in bower package jquery.inputmask#^3.3.3

Edit: Found it in current development/master branch.

[huksley]

I`ve downloaded master branch, add to paths

        "inputmask.dependencyLib": "../lib/inputmask/dist/inputmask/inputmask.dependencyLib",
        "inputmask": "../lib/inputmask/dist/inputmask/inputmask",

and using

var mask = new Inputmask({
  autoUnmask: true,
});
mask.mask(el);

Mask is applied, but no changes is propagated to model.

[RobinHerbots]

@huksley ,
Can you make a jsfiddle for it. That will be more easy to see the problem. There is / was already another issue concerning using vue and inputmask

[huksley]

Here it is
https://jsfiddle.net/6s43c4zd/3/

[huksley]

Here I am fixing this by using ugly hack
https://jsfiddle.net/ejtgj8n0/

[BruceLampson]

This is due to Jquery not using native html events @huksley the following callback worked for me

            $('.money').inputmask('decimal', {
                rightAlign: false,
                oncomplete: function(e) {
                    var event = document.createEvent('HTMLEvents');
                    event.initEvent('input', true, true);
                    e.currentTarget.dispatchEvent(event);
                    $(this).trigger('change');
                },
            });

[clowNay]

@huksley Your fix doesn't work if you add another input to the fiddle, then it clears the input.

@BruceLampson your thing works, but I have this issue that it copies over the mask to another input field somehow. Could that be the event not being closed properly?

[adyz]

Any cleaner solution for this?

I used the code above, but with onKeyDown instead of oncomplete and it's fine, but it looks a bit complicated to do all that on every key.

UPDATE: looks like the last character is not updated with neither of the methods

Thank you!

[RobinHerbots]

Does vue use it's own events model?

[RobinHerbots]

To which event is vue listening for changes?

[RobinHerbots]

I will have a look this weekend.

[RobinHerbots]

Updated jsfiddle
https://jsfiddle.net/6s43c4zd/4/

Now there is already something coming through withlout patchwork.

[RobinHerbots]

Working with jsfiddle from my phone isn't easy 😂

[clowNay]

@RobinHerbots can you try without the jquery version?

[RobinHerbots]

The latest jsfiddle is with the vanilla dependencylib

[RobinHerbots]

But you can leave the jquery plugin out

[clowNay]

Okay it seems to be working now, what did you do?

[RobinHerbots]

The last char doesn't come through on my phone.

[RobinHerbots]

I added the vanilla dependencylib.

[RobinHerbots]

Jsfiddle without jquery (see external sources and settings)

https://jsfiddle.net/6s43c4zd/5/

[adyz]

Thank you for all the help, looks like the demo works, but do I need to do something to work on my local setup?

Are the fiddle dependencies on npm? or this is just a testing branch?

[RobinHerbots]

@adyz ,

It is all available on npm and bower. But I need to do a new release. I'm also renaming the package to Inputmask instead of jquery.inputmask.

When you just load the inputmask.dependencylib.js before the inputmask.js or bundle it should be ok.

[adyz]

@RobinHerbots Cool, let me know when you release, or how to npm install with the working version to test this.

I use webpack for my current front-end setup and for inputmask I followed this GIST: https://gist.github.com/ksrb/47f9124c2f5be13f39dc645405a12608 and I think it's better to get the scripts with NPM

[RobinHerbots]

@adyz ,
npm i inputmask

in your code => var Inputmask = require("inputmask")

[adyz]

Awesoooome!!! Thank you! Works like charm!

[rodrigopires]

Hey @RobinHerbots (or anyone), any idea on how to make it work passing options to the inputmask Class, instead of declaring the mask in the data-inputmask attribute?

My attempt on JsFiddle: https://jsfiddle.net/p4zdy7kj/3/

[dermanov-ru]

Have no time to modify project core libs.

The fast solution - assign new value manually at every keyup event :)

JS

$('input.phone').inputmask('mask', {'mask': '[phone]'});

HTML + VUE

<input class="phone" v-model="PHONE" @keyup="PHONE = this.event.target.value;">