Open zaalbarxx opened 3 years ago
Same issue without vee-validate
Hiya folks! If you're visiting this in the future, here's how I managed to solve this problem:
You /can not/ use a computed property OR pass a function directly to v-mask
. You must use a regular variable, and then update that variable with watch
. For example:
<input v-mask='mask' v-model='mymodel' />
...
data() {
return {
mymodel: '',
mask: '',
currencyMask: createNumberMask({})
}
}
watch() {
mymodel(newVal) {
mask = this.currencyMask(newVal)
}
}
Hiya folks! If you're visiting this in the future, here's how I managed to solve this problem:
You /can not/ use a computed property OR pass a function directly to
v-mask
. You must use a regular variable, and then update that variable withwatch
. For example:<input v-mask='mask' v-model='mymodel' /> ... data() { return { mymodel: '', mask: '', currencyMask: createNumberMask({}) } } watch() { mymodel(newVal) { mask = this.currencyMask(newVal) } }
This will solve most things but will still trip when using currency mask with decimal, v-mask's parseMask
function when processing different type of mask, i.e function, array or string will differs.
Function will be used as is, but with array, if an element is string, it will split into a char array, which will mess with text-mask-addons "caret capture" string https://github.com/text-mask/text-mask/blob/master/addons/src/createNumberMask.js#L137
Our team avoided this issue by filtering out that specific string, which is '[]'.
V-Mask and Vue versions
2.2.4, 2.6.12
Reproduction Link
https://codesandbox.io/s/v-mask-demo-forked-ch575?file=/components/Input.vue
Steps to reproduce
input
events get continously emitted causing re-rendersWhat is Expected?
Adding function expression as mask should not trigger
input
events on everycomponentUpdated
What is actually happening?
I am not quite sure what exacly happens there, but I noticed that if I remove
v-slot
(scoped slot) fromValidationObserver
then the problem disappears. Not sure why, but seems like v-maskcomponentUpdated
triggers newinput
event on every component re-render which then gets listened byValidationObserver
which re-renders slotted content and v-mask again triggersinput
event causing a loop. Is there any specific reason why thecomponentUpdated
method does not compare function results ? I mean this code.What is the purpose of marking the mask as changed if
isFunction(value)
?