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.
2
-
If you install it as a Vue.js dependency (npmjs.com/package/flags-dropdown-vue), then you should be able to use the component. But we can't help if we don't know what steps you have taken.infinite789– infinite7892022-12-13 10:26:05 +00:00Commented Dec 13, 2022 at 10:26
-
@dinarobert I added an answer. Hope it will work as per your requirement.Rohìt Jíndal– Rohìt Jíndal2022-12-14 10:27:09 +00:00Commented Dec 14, 2022 at 10:27
Add a comment
|
1 Answer
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 class="flag-icon flag-icon-squared" :class="['flag-icon-' + option.value.toLowerCase()]"></span>
<span class="flag-text">{{ option.label }}</span>
</template>
</v-select>
</div>4 Comments
beatfloraminederecho
Thank you for your reply, but the only problem is that vuejs don't accept two scripts tag. I don't know how to add those script
Rohìt Jíndal
@dinarobert What do you mean by - vuejs don't accept two scripts tag ?
beatfloraminederecho
when I added your code inside my template it shows this error : VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates. And if I ussed it outside the template it give me this error : VueCompilerError: Single file component can contain only one <script> element
Rohìt Jíndal
@dinarobert Just for a demo in the stackoverflow editor, I used these two script tags but in your actual production or development environment you can include these libraries as a dependency by using npm or you can also use cdn link in your app global file.