如何在vue.js中的下拉选择上处理多个on change事件

Question

我有一个问题，用户需要先选择国家，然后再选择州，然后再选择城市。 现在，我在国家和州上设置了@change事件，一旦用户选择了获取状态的国家/地区，就会触发@change onstates，并且由于我拥有state_id =''，所以我的getCities函数失败了。

<select v-model="country_id" @change="getStates()">
    <option v-for="country in countries" :value="country.id">{{ country.name }}</option>
</select>
<select v-model="state_id" @change="getCities()">
    <option v-for="state in states" :value="state.id">{{ state.name }}</option>
</select>

data(){
    return{
        countries: [],
        states: [],
        cities: [],
        country_id: '',
        state_id: '',
        city_id: ''
    }
},
mounted(){
    getCountries();
},
methods:{
    getCountries(){
        // this.countries = response.data
    }
    geStates(){
        //get states where country_id = this.country_id
    },
    getCities(){
        //get cities where state_id = this.state_id
        //once country is selected even this is getting triggered
    }

}

Answer 1

只需在实际获取数据之前检查状态是否具有值即可。

getCities(){
    // Check to see if state_id has a value
    if (!this.state_id) return

    //get cities where state_id = this.state_id
    //once country is selected even this is getting triggered
}