Cascading dropdown example with VueJS

by John Passmore

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
    <div id="app"></div>
</body>

CSS

.dropdown {
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #DDD;
}

.dropdown span {
    display:inline-block;
    width: 80px;
}

JavaScript

new Vue({
    el: '#app',
    template: `
        <div class="cascading-dropdown">
            <div class="dropdown">
                <span>Continent:</span>
                <select v-model="selectedContinent">
                    <option value="">Select a Continent</option>
                    <option v-for="(country_obj, country) in places" :value="country">{{country}}</option>
                </select>
            </div>
            <div class="dropdown">
                <span>Country:</span>
                <select :disabled="countries.length == 0" v-model="selectedCountry">
                    <option value="">Select a Country</option>
                    <option v-for="(city_obj, city) in countries">{{city}}</option>
                </select>
            </div>
            <div class="dropdown">
                <span>City:</span>
                <select :disabled="cities.length == 0" v-model="selectedCity">
                    <option value="">Select a City</option>
                    <option v-for="city in cities">{{city}}</option>
                </select>
            </div>
        </div>
    `,
    data: function() {
        return {
            places: {
                "Asia": {
                    "China": ["Beijing", "Shanghai", "Guangzhou", "Tianjin"],
                    "India": ["New Delhi", "Mumbai", "Bangalore", "Chennai"],
                    "Japan": ["Tokyo", "Kyoto", "Nagoya", "Hiroshima"],
                    "Singapore": ["Singapore"],
                    "Malaysia": ["Kuala Lumpur", "Johor Bahru", "George Town", "Kota Kinabalu"]
                },
                "Europe": {
                    "Germany": ["Berlin", "Hamburg", "Munich", "Cologne", "Frankfurt", "Stuttgart"],
                    "UK": ["London", "Birmingham", "Liverpool", "Bristol"],
                    "France": ["Paris", "Marseille", "Bordeaux", "Toulouse"]
                }
            },
            countries: [],
            cities: [],
           ...