I am making dynamic dropdown lists with Vue.JS , the Countries and Regions are fetching dynamically but the Cities JSON is received but not fetched into the view and there is no error shown in the console, I couldn't find my mistake.
HTML
<div id="app">
<form action="">
<div class="form-group">
<label for="country"></label>
<select v-model="country" name="country" class="form-control" @change="loadRegions">
<option>Select country</option>
<option v-for="country in countries" :value="country.id">@{{ country.name }}</option>
</select>
</div>
<div class="form-group">
<label for="region"></label>
<select v-model="region" name="region" class="form-control" @change="loadCities">
<option>Select region</option>
<option v-for="region in regions" :value="region.id">@{{ region.name }}</option>
</select>
</div>
<div class="form-group">
<label for="city"></label>
<select v-model="city" name="city" class="form-control">
<option>Select city</option>
<option v-for="city in cities" :value="city.id">@{{ city.name }}</option>
</select>
</div>
</form>
</div>
JS
<script type="text/javascript">
var app = new Vue({
el: '#app',
data() {
return {
countries: [],
regions: [],
cities: [],
country:'',
region:'',
city:'',
}
},
mounted() {
this.loadCountries();
},
methods: {
loadCountries() {
axios.get('/countries')
.then(response => this.countries = response.data.countries)
.catch(error => console.log(error))
},
loadRegions() {
axios.get('/regions', {params: {country: this.country}})
.then(response => this.regions = response.data.regions)
.catch(error => console.log(error))
},
loadCities() {
axios.get('/cities', {params: {country: this.country, region: this.region}})
.then(response => this.cities = response.data.cities)
.catch(error => console.log(error))
}
}
})
</script>
