Try to show values through vue js with laravel in drop down

Question

Try to show countries in dropdown get from database through vue.js in laravel 7. countries didn't show in dropdown.

Template code:

<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>

I am trying to show countries in dropdown.

Answer 1

There seems to be a syntax error with @change='getCities()' this will call getCities immediately, you'd want @change='getCities' instead