Dynamic mask when using directive?

[tmepple]

Hi, thanks for the great library!

I'm using the directive form (since I'm using 3rd party UI components) and everything works great when I hardcode the mask (i.e. v-mask="'+1 (###) ###-####'") but I can't get it to work when trying to bind to instance data (i.e. :v-mask="phoneMask").

When inspecting I can see Vue binds the instance data to the element but it doesn't seem to be picked up by vue-the-mask as the on_input event listener is not created.

I was hoping to be able to dynamically change the mask depending on which country the user selects by changing the instance value of phoneMask on the fly, is there any way to do it?

[neves]

That was suppose to work. Look this example: https://jsfiddle.net/r8cL3msn/46/

[tmepple]

Hi @neves,

Thanks for the help and working jsfiddle... unfortunately I can't use the <the-mask> element and am trying to use it as a :v-mask directive inside a custom <input> element instead since I'm using a 3rd party UI library (Buefy). Maybe that's the difference?

I tried to get it working in jsfiddle but the import statement does not work in this context. In any event, this is what my non-working code looks like... https://jsfiddle.net/u2uge91u/1/

There are no JS console error messages, it just doesn't work when I use a variable for the mask. It works great when it's hardcoded. Do you think the fact that it's a directive is causing this or any other approach?

Thanks!

[bloodf]

Same error I'm facing when using the component.

I'm using with Quasar and I can't use as component but as a directive.

[jsonantunes]

Same error

[bloodf]

So no news on that :/

It can be used as fixed element as a string return, but when used with Array return it wont function as expected.

[jayarc]

I have the same issue and I'm trying to figure out a workaround here. I think it will be a common request to have dynamic setting of the mask on custom components as a directive. Anybody have tips or success with another solution?

[adamkpurdy]

Same issue. Would love to dynamically change the mask pattern via the directive on a custom input in Quasar.

[Marcus-Rise]

Same issue, on conditional changes input mask steel has permanent options

[samuelcust]

I managed to solve it by doing the following trick:

<input v-mask="`${ mask }`">

[Marcus-Rise]

It'll work only once while rendering, but you coudn't change it in runtime like getter

[matheusagnus]

Some news?

[luizpaulo165]

I managed to solve it by doing the following trick:

<input v-mask="`${ mask }`">

Working to me.

[skironDotNet]

Found a solution, not ideal but does not introduce event collision you need something like this (works for me)

<input v-mask="'hardcoded1'" v-if="adddress.Country == 1">
<input v-mask="'hardcoded2'" v-if="adddress.Country == 2">

Again not an ideal solution but works, as the mask is set upfront for the bound value.

based on this https://stackoverflow.com/questions/51836641/put-a-vue-directive-on-condition

[san8k]

You can use :key for rerender input when mask was changed. My code:

<input
      type="text"
      v-model="inputValue"
      :key="valueMask"
      v-mask="valueMask"
  >

valueMask is computed value and return different mask string for different state conditions.

[7doctor7]

adding :key solved issue in my case Thanks @san8k