javascript - Vue js keeping dropdown values when selection an other one -

hello have dropdown (select of countries) , want when choose country cities of country in new dropdown (total of dropdown : 2) , when select second country want other dropdown of cities of country have 3 dropdowns in total. problem here when select country , select city selection disapear after selecting other country. how can resolve this? i'm using multiselect in country dropdown , simple select in cities dropdown

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 = 0, length = newvalue.length; < 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' }]           )         }       }     }   } });     

<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> 

vue should data driven. extent, i've modified code achieve result. here new data structure.

const countries = [   {      value: 3,      name: 'france',      cities: [       { value: 31, name: 'paris' },       { value: 32, name: 'marseille' }     ],      selectedcities: [] },   {      value: 5,      name: 'usa',      cities: [       { value: 51, name: 'new-york' },       { value: 52, name: 'boston' }     ],      selectedcities: []},   {      value: 6,      name: 'canada',      cities: [       { value: 61, name: 'montreal' },       { value: 62, name: 'vancouver' },       { value: 63, name: 'ottawa' },       { value: 64, name: 'toronto' }     ],      selectedcities: []    },   {      value: 8,      name: 'morocco',      cities:[       { value: 81, name: 'rabat' },       { value: 82, name: 'casablanca' },       { value: 83, name: 'fes' }     ],      selectedcities: []    } ] 

and code

new vue({   el: "#app",   data: function() {     return {       countries,       selectedcountries: []     }   },    computed:{     originalselectedcountry(){       return this.selectedcountries.map(country => country.value)      },     originalselectedcities(){       return this.selectedcountries.reduce((acc, country) => {         acc.push(country.selectedcities.map(city => city.value))         return acc       },[])     }   } });  

and here template

<div id="app">   selected countries : {{ originalselectedcountry }}   <br />   selected cities : {{ originalselectedcities }}   <br />   <select v-model="selectedcountries" multiple >      <option v-for="country in countries" :value='country' :key="country.value">        {{ country.name }}      </option>   </select>   <select v-for="country in selectedcountries" v-model="country.selectedcities"  :key="country.value" multiple>     <option v-for="city in country.cities" :value="city">{{city.name}}</option>   </select> </div> 

here working example.

here significant points.

• i moved cities associated each country country's data. way, building select flows naturally , don't have watch selected countries.
• since have multiple sets of selected cities, doesn't make sense try use 1 model sets. added selectedcities property each country.
• i turned former selectedcountries , selectedcities computed values. these values can derived current selectedcountries because selectedcities property of each country. in opinion, selectedcities (which turned originalselectedcities) useless data structure. happens if order of cities changes? have no idea countries 2 dimensional arrays associated with.