Dropdown with flags in Vuejs-CodePudding

I want to do a dropdown with flags for phone numbers in a form using Vuejs but I didn't found a solution. I tried all the solutions in the internet using html and css but no result and I tried also the vuejs solution flag-dropdown-vue but the installation always give me errors please any help is highly appreciated.

CodePudding user response：

You can simply achieve this with vue-select package.

Live Demo :

Vue.component('v-select', VueSelect.VueSelect);

new Vue({
   el: '#app',
   data: {
      options: [
         { value: 'AF', label: 'Afghanistan'},
         { value: 'AX', label: 'Aland Islands'},
         { value: 'AL', label: 'Albania'},
         { value: 'DZ', label: 'Algeria'},
         { value: 'AS', label: 'American Samoa'}
      ]
   }
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css"/>
<div id="app">
   <v-select :options="options">
      <template slot="option" slot-scope="option">
         <span  :></span>
         <span >{{ option.label }}</span>
      </template>
   </v-select>
</div>