[V4] Input masking

[kozmanbalint]

Hi all,

applying input masks on a strictly validated form is a common thing I guess. I'd like to ask about the proper way of doing it with V4.

Back in the V3 days I used to go with cleave.js (vue-cleave-component to be precise) by following the pattern below:

<validation-observer v-slot="props">
  <validation-provider v-slot="v" mode="eager" :rules="{required: true, etc...}">
    <cleave v-model="myModel" :options="myMask" type="text" ></cleave>
  </validation-provider>
</validation-observer>

With [V4] vue-cleave-component doesn't seem to work anymore.
I also tried maska, but couldn't make it work either.

So my question is: what would be the proper way (and pattern) of input masking with [V4]?

Thanks in advance,
Bálint

[logaretm]

Not sure about the problem, a code sample would've helped.

For maska it seems to work fine, except you don't set the directive on the components because that's stated there that it operates on input nodes. So you either need to use Field component with scoped slots rendering or use useField and mask the input manually using their vanillajs guide.

This is a small example for maska:

https://codesandbox.io/s/lively-violet-jqon1?file=/src/App.vue

[kozmanbalint]

Thanks for your answer and well yes, sorry, I didn't mention that it's most likely the v-model binding that makes things go wrong.

I've updated the above codesandbox example with v-model, which produces the problem: if there's any separator in the mask (which is quite usual), than the bound model value gets messed up. Enter '123456' to the input and the bound value remains '123'.

[logaretm]

You need to link the example here, codesandbox "forks" it to a different URL when you change the code.

[kozmanbalint]

Sure, sorry, here's the link: https://codesandbox.io/s/focused-hooks-5293g

[logaretm]

This is not an issue with vee-validate, it's with the .number modifier on the v-model, if you remove it everything works fine. This happens even if you are not using vee-validate

I'm not sure if there something I can do other than to offer advice. In my experience I didn't need v-model since v4 was released. And with Vue 2, I never used the model modifiers because I will always cast them before sending them to the API or I created input components that maintain the value type.

I guess you could report this to the plugin owners.

[kozmanbalint]

Thanks for the effort and your advice! And you're right: this is not an issue with vee-validate, and probably not even an issue with each specific lib - so I'm not trying to file this as a bug report.
It's much rather about what I've mentioned in my opening post: I'm looking for a way to achieve a solution for a model-bound, validated and masked form - something for which I had a working pattern with [V3] and vue-cleave-component.
To put it in another way, I'm looking for the equivalent for the code below within the [V4] world (and I'm pretty sure others need something like this as well - thatswhy I started this thread):

<validation-observer v-slot="props">
  <validation-provider v-slot="v" mode="eager" :rules="{required: true, etc...}">
    <cleave v-model="myModel" :options="myMask" type="text" ></cleave>
  </validation-provider>
</validation-observer>

Thanks,
Bálint