[Vuejs]-Vue js populate new selects when changing the main one

by

0👍

✅

This is an example that you can maybe use (but need some modifications to use your API call) :

new Vue({
  el: "#app",
  data: function() {
  	return {
    	selectedCountries: [],
    	selectOptionsCountries: [
      	{ value: 3, name: 'FRANCE' },
        { value: 5, name: 'USA' },
        { value: 6, name: 'CANADA' },
        { value: 8, name: 'MOROCCO' }
      ],
      selectedCities: [],
      selectOptionsCities: []
    }
  },
  methods: {
  	
  },
  watch: {
    selectedCountries: function(newValue, oldValue) {
      this.selectOptionsCities = [];
      this.selectedCities = [];
  
      for( var i = 0, length = newValue.length; i < length; i++ ){
      
        this.selectedCities[i] = [];
        
      	if( newValue[i] === 3 ){
          this.selectOptionsCities.push(
            [{ value: 31, name: 'Paris' },
            { value: 32, name: 'Marseille' }]
          )
        }
        if( newValue[i] === 5 ){
          this.selectOptionsCities.push(
            [{ value: 51, name: 'New-York' },
            { value: 52, name: 'Boston' }]
          )
        }
        if( newValue[i] === 6 ){
          this.selectOptionsCities.push(
            [{ value: 61, name: 'Montreal' },
            { value: 62, name: 'Vancouver' },
            { value: 63, name: 'Ottawa' },
            { value: 64, name: 'Toronto' }]
          )
        }
        if( newValue[i] === 8 ){
          this.selectOptionsCities.push(
            [{ value: 81, name: 'Rabat' },
            { value: 82, name: 'Casablanca' },
            { value: 83, name: 'Fes' }]
          )
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">

  Selected countries : {{ selectedCountries }}
  <br />
  Selected cities : {{ selectedCities }}
  <br />
  <select v-model="selectedCountries" multiple>
     <option v-for="(option, index) in selectOptionsCountries" :value='option.value'>
       {{ option.name }}
     </option>
  </select>
  
  <select v-for="(optionsCities, index) in selectOptionsCities" v-model="selectedCities[index]" multiple>
    <option v-for="(option, index) in optionsCities" :value='option.value'>
       {{ option.name }}
     </option>
  </select>
</div>

0👍

Added after author’s comment:

Check this fiddle: http://jsfiddle.net/jjpfvx5q/1/

Inside ‘chosenCities’ array you have all selected cities by country (one city per country.)

Original answer:

Here is an example for you: fiddle

Is that what you are trying to achieve?

setTimeout functions are just pretending a real data fetching.

<script src="//unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<template>
<div>
  <select v-model="country">
    <option disabled value="">Please select one</option>
    <option
      v-for="c in countries"
      :value="c.id">{{ c.name }}</option>
  </select>
<span>Selected: {{ country }}</span>
<span  v-if="cities.length">Cities:</span>
<ul v-if="cities.length">
<li v-for="c in cities">{{ c }}</li>  
</ul>
</div>
</template>
</div>

<script>
var Main = {
    data() {
      return {
        country: {},
        countries: [],
        cities: [],
        coInit: [{ id: '3', name: 'France' }, { id: '2', name: 'USA' }], 
        cFrance: ['Paris', 'Whatever'], 
        cUSA: ['NY', 'LA'] 
      }
    },
    methods: {
        loadCountries: function () {
        setTimeout(() => { this.countries = this.coInit }, 500);
      },
      getCities: function() { 
      if(this.country) {
        switch (this.country) {
            case '3': 
            setTimeout(() => { this.cities = this.cFrance }, 500);
            break;
          case '2': 
            setTimeout(() => { this.cities = this.cUSA }, 500);
            break;
        }
      }
      }
    },
    mounted() {
        this.loadCountries(); 
    },
    watch: {
        country: function() { 
        this.getCities();
      }
    }
  }
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');
</script>

Leave a comment