I want to use in my app on vuejs 3 this library intl-tel-input. There is a ready component vue3-tel-input.
Problem: directive v-model doesn't work - variable from data that passed as a model to component doesn't changed.
Every input event, which emitted from component, works three times - visible in the console.
Best regards.
v-model doesn't work in vue3-tel-input because that component hasn't migrated its v-model implementation to Vue 3. The only migration that component seems to have completed is the plugin installation.
In Vue 2, the model property was named "value" and the model-update event was "input". However in Vue 3, they've been renamed to "modelValue" and "update:modelValue", respectively. Notice how vue3-tel-input still uses "value" and "input".
A workaround is for the consumer component to manually bind value and listen to input events, effectively implementing Vue 2 v-model in the parent:
<template>
<vue-tel-input :value="phone" @input="onInput"></vue-tel-input>
<div>{{ phone }}</div>
</template>
<script>
import { VueTelInput } from 'vue3-tel-input'
import 'vue3-tel-input/dist/vue3-tel-input.css'
export default {
components: {
VueTelInput
},
data() {
return {
phone: '+79991234567',
}
},
methods: {
onInput(phone, phoneObject, input) {
if (phoneObject?.formatted) {
this.phone = phoneObject.formatted
}
}
}
}
</script>
