vuejsのドロップダウン選択で複数の変更イベントを処理する方法

Question

私は、ユーザーが最初に国を選択してから、次に都市を選択する必要があるという問題があります。今度は国と州でsetup @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 
}