如何在 vuejs 中的下拉选择中处理多个更改事件

Question

我有一个问题，用户需要先选择国家，然后是州，然后是城市。现在我已经在国家和州上设置了@change 事件，一旦用户选择国家，它就会获取州，并且也会触发州上的@change，并且由于我有 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
}