VueJS取决于另一个选择

Question

我有来自后端的国家和城市jsons。当我在城市选择一个国家时，我想在vuejs中做出选择，从那个国家选择城市。

我被困在这里，我不知道如何将城市仅限于所选的国家。

有人能给我一点帮助吗？

国家JSON

GET /语言/国家（国家列表）

{ 
    "errorCode": 0, 
    "errorMessage": null, 
    "contries": [ 
     { 
      "errorCode": 0, 
      "errorMessage": null, 
      "rid": "1", 
      "sortname": "AF", 
      "name": "Afghanistan", 
      "phonecode": 93, 
      "links": [] 
     }, 
     { 
      "errorCode": 0, 
      "errorMessage": null, 
      "rid": "2", 
      "sortname": "AL", 
      "name": "Albania", 
      "phonecode": 355, 
      "links": [] 
     }, 
     { 
      "errorCode": 0, 
      "errorMessage": null, 
      "rid": "3", 
      "sortname": "DZ", 
      "name": "Algeria", 
      "phonecode": 213, 
      "links": [] 
     } 
    ], 
    "links": [] 
} 

城市JSON

GET /语言/国家/ 1（与ID = 1个城市的名单）

{ 
    "errorCode": 0, 
    "errorMessage": null, 
    "cities": [ 
    { 
     "errorCode": 0, 
     "errorMessage": null, 
     "rid": "33129", 
     "name": "Abrud", 
     "stateId": 2934, 
     "links": [] 
    }, 
    { 
     "errorCode": 0, 
     "errorMessage": null, 
     "rid": "33130", 
     "name": "Aiud", 
     "stateId": 2934, 
     "links": [] 
    }, 
    { 
     "errorCode": 0, 
     "errorMessage": null, 
     "rid": "33131", 
     "name": "Alba Iulia", 
     "stateId": 2934, 
     "links": [] 
    } 
    ], 
    "links": [] 
} 

VueJS脚本

export default { 
    data() { 
     return { 
     users: {}, 
     countries: {}, 
     cities: {} 
     } 
    }, 
    created() { 
     this.getUsers(); 
     this.getCountries(); 
     this.getCities(); 
    }, 
    methods: { 
     getUsers() { 
     this.$http.get("/user") 
      .then((response) => { 
      this.users = response.data.users; 
      }) 
     }, 
     getCountries() { 
     this.$http.get("/languages/countries") 
      .then((response) => { 
      this.countries = response.data.contries; 
      }) 
     }, 
     getCities() { 
     this.$http.get("/languages/countries/"+this.country.rid) 
      .then((response) => { 
      this.cities = response.data.cities; 
      }) 
     }, 
    }, 
     components: { 
      appMenu: Menu 
     } 
    } 

HTML选择

<div class="form-group"> 
    <div class="row"> 
    <div class="col-6 pz-rel"> 
     <label class="eda-form-label" for="country">COUNTRY</label> 
     <select class="eda-form-input"> 
     <option v-for="country in countries" :value="country.name">{{country.name}}</option> 
     </select> 
     <i class="ti-angle-down icons-for-select"></i> 
    </div> 
    <div class="col-6 pz-rel"> 
     <label class="eda-form-label" for="city">CITY</label> 
     <select class="eda-form-input"> 
     <option v-for="city in cities" :value="city.name">{{city.name}}</option> 
     </select> 
     <i class="ti-angle-down icons-for-select"></i> 
    </div> 
    </div> 
</div> 

Answer 1

所以第一步你得到所有国家。
然而，随着你所描述的城市的其他呼吁，你无法一次获得所有国家的所有城市。
因此，作为一个结果，我会为当前选择的国家

编辑 与<option>线必须改变获取城市。目前该值将被绑定到name。因此，它必须从< ... :value="country.name" to :value="country">

<select class="eda-form-input" v-model='selectedCountry' v-on:change='getCities(selectedCountry.rid)'> 
    <option v-for="country in countries" :value="country"> <!-- here --> 
    {{country.name}} 
    </option> 
</select> 

改变上面有一个或多个数据变量现在selectedCountry，这将保持当前选定的国家。所以这也必须在data中声明。

data() { 
    return { 
    users: {}, 
    countries: {}, 
    cities: {}, 
    selectedCountry: null 
    } 
}, 

，并给予方法getCities该国的一个参数：

getCities(countryId) { 
    this.$http.get("/languages/countries/"+countryId) 
     .then((response) => { 
     this.cities = response.data.cities; 
     }) 
    },