Trying to display a list of countries in a dropdown menu by fetching data from a database using vue.js in laravel 7. However, the countries are not appearing in the dropdown.
Code Snippet:
<template>
<div class="col-md-6 pull-right">
<label>Country of Birth </label>
<select name="birth_county" v-model='country' @change='getCities()'>
<option value="" selected disabled>Select country</option>
<option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
</select>
</div>
</template>
Script Code:
<script>
export default {
data(){
return {
country:0,
countries:[],
city:0,
cities:[]
}
},
methods:{
getCountries: function (){
axios.get('/get-countries')
.then(function (response){
this.countries = response.data;
}.bind(this));
},
getCities: function (){
axios.get('/get-cities', {
params: {
id: this.country
}
})
.then(function (response){
this.cities = response.data;
}.bind(this))
}
},
created: function () {
this.getCountries()
}
}
</script>
Attempting to populate the dropdown with a list of countries.