尝试在下拉菜单中使用 laravel 通过 vue js 显示值

Question

尝试在 laravel 7 中通过 vue.js 从数据库获取的下拉列表中显示国家/地区。国家/地区未显示在下拉列表中。

模板代码：

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

我正在尝试在下拉列表中显示国家/地区。

Answer 1

@change='getCities()' 似乎存在语法错误，这将立即调用 getCities，您应该改为使用 @change='getCities'