CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
moses toh
moses toh

Reputation: 13192

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

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 :

enter image description here

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?

Upvotes: 1

Views: 6845

Answers (1)

chans
chans

Reputation: 5260

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

Upvotes: 3

Related Questions