search

vuejs-tips / vue-the-mask

Tiny (<2k gzipped) and dependency free mask input for Vue.js
https://vuejs-tips.github.io/vue-the-mask/
1.74k stars 213 forks source link

Ionic 4 VueJs Error #128

Open marcelo-ribeiro opened 5 years ago

marcelo-ribeiro commented 5 years ago

[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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 1 year ago

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.