CODEWITHSUNDEEP
phplaravelvue.js
ivan
ivan

Reputation: 43

VueJS dynamic dropdown - json data not showing in the view

I am making dynamic dropdown lists with Vue.JS , the Countries and Regions are fetching dynamically but the Cities JSON is received but not fetched into the view and there is no error shown in the console, I couldn't find my mistake.

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

Upvotes: 2

Views: 1292

Answers (1)

Daniel Aguilar
Daniel Aguilar

Reputation: 91

the mistake is on the last square brackets:

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

put another..

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

Upvotes: 1

Related Questions