Import fiddle as a JS Module - chain fiddles together

by cameronnz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/axios@^0.21"></script>
    <script src="https://unpkg.com/vue@^3"></script>
</head>

<body>
    <div id="app">
        <select id="country-select" :disabled="countriesLoading" v-model="selectedCountry">
            <option value="">Select a country</option>
            <option v-for="country in countries" :value="country.lIso2">{{ country.lCountry }}</option>
        </select>
        <div id="city-select-col">
            <select id="city-select" multiple :disabled="citiesLoading" v-model="selectedCities">
                <option value="">Select cities</option>
                <option v-for="city in cities" :value="city.lID" :key="city.lID">
                    {{ city.lCity }}<span v-if="city.lAdminName">, {{ city.lAdminName }}</span>
                    <span v-if="city.lCapital">({{ city.lCapital }})</span>
                </option>
            </select>
            <div id="city-select-buttons">
                <button id="select-all" class="btn" @click="selectAllCities">Select All</button>
                <button id="deselect-all" class="btn" @click="deselectAllCities">Deselect All</button>
            </div>
        </div>
    </div>
</body>

JavaScript

const app = Vue.createApp({
    data() {
        return {
            countries: [],
            countriesLoading: false,
            selectedCountry: "",
            cities: [],
            citiesLoading: false,
            selectedCities: [],
        };
    },
    computed: {
        getCountries() {
            return () => {
                this.countriesLoading = true;
                this.countries = [
                  {
                      "lCountry": "Guadeloupe",
                      "lIso2": "GP"
                  },
                ];

                this.countriesLoading = false;
            };
        },
    },
    watch: {
        selectedCountry() {
            this.getCities();
        },
    },
    methods: {
        getCities() {
            this.citiesLoading = true;
            this.cities = [
                {
                    "lID": 13282,
                    "lCity": "Pointe-\u00e0-Pitre",
                    "lCountry": "Guadeloupe",
                    "lIso2": "GP",
                    "lAdminName": "",
                    "lCapital": null,
                },
                {
                    "lID": 13283,
                    "lCity": "Basse-Terre",
                    "lCountry": "Guadeloupe",
                    "lIso2": "GP",
                    "lAdminName": "",
                    "lCapital": "primary",
                }
            ];
            this.citiesLoading = false;
        },
        selectAllCities() {
            this.selectedCities = this.cities.map((city) => city.lID);
        },
        deselectAllCities() {
            this.selectedCities = [];
        },
    },
    mounted() {
        this.getCountries();
    },
});

app.mount("#app");