You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey, I stumbled upon one issue during migration to Vue3 version of the component.
Component is mounted accordingly to the docs. But typed phone number doesn't show up in the input. I type one number in input, and after another hit in the keyboard number gets erased. I'm unable to type full number.
I copied the source code of the VueTelInput into my project and debugged the issue. It's coming from having both bindings of v-model="phone" and :value="modelValue" on <input>. Always when phone gets updated it gets overridden later with modelValue that has previous state of the phone number. Although in my Vue 3 setup I'm using Options API, not sure if it's related.
Is there any particular reason why both :value and v-model are needed?
Hey, I stumbled upon one issue during migration to Vue3 version of the component.
Component is mounted accordingly to the docs. But typed phone number doesn't show up in the input. I type one number in input, and after another hit in the keyboard number gets erased. I'm unable to type full number.
I copied the source code of the
VueTelInput
into my project and debugged the issue. It's coming from having both bindings ofv-model="phone"
and:value="modelValue"
on<input>
. Always whenphone
gets updated it gets overridden later withmodelValue
that has previous state of the phone number. Although in my Vue 3 setup I'm using Options API, not sure if it's related.Is there any particular reason why both
:value
andv-model
are needed?If I do following:
<input v-model="phone" ref="input" :type="inputOptions.type" :autocomplete="inputOptions.autocomplete" :autofocus="inputOptions.autofocus" :class="['vti__input', inputOptions.styleClasses]" :disabled="disabled" :id="inputOptions.id" :maxlength="inputOptions.maxlength" :name="inputOptions.name" :placeholder="parsedPlaceholder" :readonly="inputOptions.readonly" :required="inputOptions.required" :tabindex="inputOptions.tabindex" - :value="modelValue" :aria-describedby="inputOptions['aria-describedby']" @blur="onBlur" @focus="onFocus" @input="onInput" @keyup.enter="onEnter" @keyup.space="onSpace" />
component works perfectly fine.
Thanks for the answer in the advance.
The text was updated successfully, but these errors were encountered: