How can I add search country code on vue tel input?

Question

My vue component :

      <v-container>
        <v-row>        
          <v-col cols="12" sm="6" md="3">
            <vue-tel-input v-model="phone" v-on:country-changed="countryChanged"></vue-tel-input>
          </v-col>
        </v-row>
      </v-container>
      <v-btn
        color="success"
        @click="submit"
      >
        submit
      </v-btn>

My codepen : https://codepen.io/positivethinking639/pen/XWWBXMW?editors=1011

I want display search like this :

So make it easier for users to choose the country code

How can I do it?

we cannot directly use search to existing v-tel-input, there is no slot provided to append search box to the countries results. Still if you want to implement, you can search for some public api's to get the country codes, names and flags, the customize your UI using vuetify select components — chans

Arc Arc · Accepted Answer · 2019-11-10T23:32:45

I think the simplest is to have two drop-downs side-by-side, so it looks just like the one you posted. When the user clicks "Save", have the v-model with the country code and the v-model with the number joined.

data () => ({
     countryCode: '+81',
     number: '555-5555'
}),
methods: {
     submitForm () {
          const phone = countryCode + number //or however you want to concatenate
          //do other stuff here
     }
}

Your other options are to splice and add the country code to the string ahead of the phone number on change, but that seems a little overkill for something with a simple solution.

If I'm not understanding your question, please add a little more detail.

If you specifically want the numbers to show, then you'll have to make changes to the library options you're using. It seems you're using vue-tel-input package, right?

You can set the + code to show with this:

inputOptions: {
          showDialCode: true
        }

Check out all the options here: https://www.npmjs.com/package/vue-tel-input

How can I add search country code on vue tel input?

1 Answers