Question

我正在使用Vue.JS制作动态下拉列表，Countries和Regions是动态获取的，但是收到了Cities JSON但没有获取到视图中，并且有控制台中未显示错误，我找不到我的错误。

HTML

<div id="app">
  <form action="">
    <div class="form-group">
      <label for="country"></label>
      <select v-model="country" name="country" class="form-control" @change="loadRegions">
        <option>Select country</option>
        <option v-for="country in countries" :value="country.id">@{{ country.name }}</option>
      </select>
    </div>

    <div class="form-group">
      <label for="region"></label>
        <select v-model="region" name="region" class="form-control" @change="loadCities">
          <option>Select region</option>
          <option v-for="region in regions" :value="region.id">@{{ region.name }}</option>
        </select>
    </div>

    <div class="form-group">
      <label for="city"></label>
        <select v-model="city" name="city" class="form-control">
          <option>Select city</option>
          <option v-for="city in cities" :value="city.id">@{{ city.name }}</option>
       </select>
     </div>
   </form>
 </div>

JS

 <script type="text/javascript">

  var app = new Vue({
    el: '#app',
     data() {
      return {
       countries: [],
       regions: [],
       cities: [],
       country:'',
       region:'',
       city:'',
   }
 },

 mounted() {
    this.loadCountries();
  },

   methods: {
    loadCountries() {
       axios.get('/countries')
       .then(response => this.countries = response.data.countries)
       .catch(error => console.log(error))
    },    
    loadRegions() {
       axios.get('/regions', {params: {country: this.country}})
       .then(response => this.regions = response.data.regions)
       .catch(error => console.log(error))
    },
    loadCities() {
       axios.get('/cities', {params: {country: this.country, region: this.region}})
       .then(response => this.cities = response.data.cities)
       .catch(error => console.log(error))
    }
   }
 })
 </script>

Json object in console

Devtools screenshot

Answer 1

错误在最后一个方括号中

<option v-for="city in cities" :value="city.id">@{{ city.name }</option>

再放一个..

<option v-for="city in cities" :value="city.id">@{{ city.name }}</option>

VueJS动态下拉菜单-JSON数据未显示在视图中

1 个答案: