How can I combine vue tel input with input text vuetify?

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?

A quick glance a the docs seems to show that a input event is provided, try catching that event and see if the country code is there. — Michael

chans chans · Accepted Answer · 2019-11-10T14:28:10

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;
  }
}
})

How can I combine vue tel input with input text vuetify?

1 Answers