Vuejs更改多個選擇簡單的選擇

Question

我是新與vuejs我有這樣的腳本處理多個選擇，我想只用簡單的選擇對國家和城市

我的腳本：http://codepen.io/Kradek/pen/KWLxVa?editors=1010

<div id="app"> 
    Selected Countries: {{selectedCountries}} 
    <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.selectedCity" :key="country.value"> 
    <option v-for="city in country.cities" :key="city.value" :value="city">{{city.name}}</option> 
    </select> 
</div> 

console.clear() 
const countries = [ 
    { 
    value: 3, 
    name: 'FRANCE', 
    cities: [ 
     { value: 31, name: 'Paris' }, 
     { value: 32, name: 'Marseille' } 
    ], 
    selectedCity:{ value: 31, name: 'Paris' } }, 
    { 
    value: 5, 
    name: 'USA', 
    cities: [ 
     { value: 51, name: 'New-York' }, 
     { value: 52, name: 'Boston' } 
    ], 
    selectedCity: null}, 
    { 
    value: 6, 
    name: 'CANADA', 
    cities: [ 
     { value: 61, name: 'Montreal' }, 
     { value: 62, name: 'Vancouver' }, 
     { value: 63, name: 'Ottawa' }, 
     { value: 64, name: 'Toronto' } 
    ], 
    selectedCity: null 
    }, 
    { 
    value: 8, 
    name: 'MOROCCO', 
    cities:[ 
     { value: 81, name: 'Rabat' }, 
     { value: 82, name: 'Casablanca' }, 
     { value: 83, name: 'Fes' } 
    ], 
    selectedCity: null 
    } 
] 

new Vue({ 
    el: "#app", 
    data: function() { 
    return { 
     countries, 
     selectedCountries: [] 
    } 
    } 
}); 

我感謝所有幫助

Answer 1

模板

<div id="app"> 
    Selected Country: {{selectedCountry}} 
    <br /> 
    <select v-model="selectedCountry" > 
    <option v-for="country in countries" :value='country' :key="country.value"> 
     {{ country.name }} 
    </option> 
    </select> 
    <select v-if="selectedCountry" v-model="selectedCountry.selectedCity"> 
    <option v-for="city in selectedCountry.cities" :key="city.value" :value="city">{{city.name}}</option> 
    </select> 
</div> 

代碼

const countries = [ 
    { 
    value: 3, 
    name: 'FRANCE', 
    cities: [ 
     { value: 31, name: 'Paris' }, 
     { value: 32, name: 'Marseille' } 
    ], 
    selectedCity: null }, 
    { 
    value: 5, 
    name: 'USA', 
    cities: [ 
     { value: 51, name: 'New-York' }, 
     { value: 52, name: 'Boston' } 
    ], 
    selectedCity: null}, 
    { 
    value: 6, 
    name: 'CANADA', 
    cities: [ 
     { value: 61, name: 'Montreal' }, 
     { value: 62, name: 'Vancouver' }, 
     { value: 63, name: 'Ottawa' }, 
     { value: 64, name: 'Toronto' } 
    ], 
    selectedCity: null 
    }, 
    { 
    value: 8, 
    name: 'MOROCCO', 
    cities:[ 
     { value: 81, name: 'Rabat' }, 
     { value: 82, name: 'Casablanca' }, 
     { value: 83, name: 'Fes' } 
    ], 
    selectedCity: null 
    } 
] 

new Vue({ 
    el: "#app", 
    data: function() { 
    return { 
     countries, 
     selectedCountry: null 
    } 
    } 
}); 

Updated pen。