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

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/58791049/how-can-i-add-search-country-code-on-vue-tel-input