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