Ionic 4 VueJs Error

[marcelo-ribeiro]

[Vue warn]: Error in directive mask bind hook: "Error: v-mask directive requires 1 input, found 0"

Example: <ion-input v-mask="["##/##/####"]" />

Obs: The mask works fine but have errors in the console.

[vhoyer]

could you provide a small reproducible link, maybe in codesand box, if you could it could help the manteiners to work on your problem (maybe even I can help :man_shrugging:)

[marcelo-ribeiro]

could you provide a small reproducible link, maybe in codesand box, if you could it could help the manteiners to work on your problem (maybe even I can help 🤷‍♂)

Follow link with demo: https://codesandbox.io/embed/cold-forest-mi8hm?fontsize=14&hidenavigation=1&theme=dark

[vhoyer]

sooo, what I think is happening is that the vue-the-mask is loading before the ionic native web components loads, as such, at the time vue-the-mask is evaluating, it is not seem the rendered web component but the <ion-input> with in practice is really not an input, hence the error message you are receiving :/

I'm sorry, I don't know how to help ya tho :/

plus, the manteiners of this project don't mess with this in a long ime :(

[flipak180]

I solved this problem by adding hidden vanilla input with mask and same v-model link

<ion-item class="ion-margin-bottom">
  <ion-label position="floating">Телефон</ion-label>
  <ion-input autocapitalize="on" v-model="phone" type="tel" inputmode="tel" placeholder="+7 (___) ___-__-__"></ion-input>
  <input v-mask="'+7 (###) ###-##-##'" v-model="phone" style="display: none">
</ion-item>

[alexcvcoelho]

I solved this issue in my forked repo.

try install

npm install https://github.com/alexcvcoelho/vue-the-mask/archive/refs/tags/v0.11.2.tar.gz

[marcelo-ribeiro]

I solved this issue in my forked repo.

try install

npm install https://github.com/alexcvcoelho/vue-the-mask/archive/refs/tags/v0.11.2.tar.gz

How did you solve it?

[alexcvcoelho]

I solved this issue in my forked repo. try install

npm install https://github.com/alexcvcoelho/vue-the-mask/archive/refs/tags/v0.11.2.tar.gz

How did you solve it?

I solve in this commit adding this condition on if !el.tagName.toLocaleUpperCase().includes('ION-INPUT') where is done a query selector for input element

[dominicmonteiro]

I solved this error by installing the package Ionic Vue Input Mask (https://www.npmjs.com/package/ionic-vue-input-mask) It is a fork of Vue The Mask, but fixing the issue forum error.