Country State City Cascading DropDown list using VueJS
In this Post We Will Explain About is Country State City Cascading DropDown list using VueJS With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Cascading dropdown example with VueJSExample
In this post we will show you Best way to implement Populate Cascading Dropdown Using Web API and VueJS, hear for Cascading DropDown List using VueJSwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Make a HTML file and define markup
first of all simple create a html file and here include some vuejs libs or external libs add and simple create a div here append this vuejs drodown template add using vuejs.
[php]
[/php]
Make a js file and define scripting
in this example to learn Country State City Cascading DropDown list using VueJS with multiple select box using vuejs.
[php]
new Vue({
el: ‘#liveApp’,
template: `
Select any Continent
{{co_obj}}
Select a Country
{{my_city}}
Select any City List
{{my_city}}
`,
data: function() {
return {
all_place: {
“Asia”: {
“Pakistan”: [“Lahor”, “Lahor 1”, “Lahor 2”, “Lahor 3”],
“India”: [“Rajkot”, “ahemdabad”, “baroda”, “Mubai”],
“Japan”: [“Japan 1”, “Kyoto”, “Japan 2”, “Japan 3”],
“usa”: [“usa 1”],
“uk”: [“uk Kuala Lumpur”, “Johor uk Bahru”, “uk George Town”, “uk Kinabalu”]
},
“Europe”: {
“Germany”: [“Germany 1”, “Germany 2”, “Germany 3”, “Germany 4”, “Germany 5”, “Germany 6”],
“UK Europe”: [“UK London”, “UK Birmingham”, “UK 1”, “UK 2”],
“France”: [“France Paris”, “France Marseille”, “France Bordeaux”, “France Toulouse”]
}
},
countries_list: [],
cities_list: [],
Continent_select: “”,
count_selected: “”,
city_selected: “”
}
},
watch: {
Continent_select: function() {
this.countries_list = [];
this.cities_list = [];
this.count_selected = “”;
this.city_selected = “”;
if (this.Continent_select.length > 0) {
this.countries_list = this.all_place[this.Continent_select]
}
},
count_selected: function() {
this.cities_list = [];
this.city_selected = “”;
if (this.count_selected.length > 0) {
this.cities_list = this.all_place[this.Continent_select][this.count_selected]
}
}
}
})
[/php]
CSS File
[php]
.custom_drpdown {
margin: 11px 0;
padding: 11px 0;
border-bottom: 2px solid #3D3D3D;
}
.custom_drpdown span {
display:inline-block;
width: 82px;
}
[/php]
I hope you have Got What is Creating Cascading DropDownLists in Vuejs And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.
