How can I combine vue tel input with input text vuetify? - vue.js

Question

My code like this :
<v-row>
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Phone"
outlined
dense
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<vue-tel-input v-model="phone"></vue-tel-input>
</v-col>
</v-row>
My codepen like this : https://codepen.io/positivethinking639/pen/qBBKYON?&editable=true&editors=101
I want to combine it to be like this :
The blue sign is taken from vue tel input. The text field next to it is taken from the vuetify component
How do I combine 2 different components into one like the image above?

Answer 1

Yes, it is possible to set the country code next to dropdown
Here is the working codepen: https://codepen.io/chansv/pen/pooZJey?editors=1010
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Phone"
outlined
dense
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<vue-tel-input v-model="phone" #country-changed="countrySelected">
<template v-slot:arrow-icon>
<v-icon>arrow_drop_down</v-icon>
<strong>+{{countryCode}}</strong>
</template>
</vue-tel-input>
</v-col>
</v-row>
</v-container>
</v-form>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
phone: null,
countryCode: null,
}
},
methods: {
countrySelected(val) {
this.countryCode = val.dialCode;
}
}
})