javascript - Vue js在选择另一个时保留下拉值

Question

您好，我有一个下拉列表(选择国家/地区)，我希望当我选择一个国家/地区时，我会在新的下拉列表中获得该国家/地区的城市(现在下拉列表总数:2)，当我选择第二个国家/地区时，我想要获得一个这个国家的其他城市下拉列表，所以我现在总共有 3 个下拉列表。 我的问题是，当我选择一个国家/地区并选择一个城市时，我的选择在选择其他国家/地区后消失了。 我该如何解决这个问题？ 我在国家/地区下拉列表中使用多选，在城市下拉列表中使用简单选择

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' }]
          )
        }
      }
    }
  }
});    

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

Answer 1

Vue 通常应该是数据驱动的。就这一点而言，我已经修改了您的代码以实现您的结果。这是新的数据结构。

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: [] 
  }
]

和代码

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
      },[])
    }
  }
}); 

这是模板

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

这是工作 example .

以下是要点。

• 我将与每个国家/地区相关的城市移至该国家/地区的数据中。这样，您就可以自然地构建选择的流程，而无需关注所选的国家/地区。
• 由于您有多组选定的城市，因此尝试对所有组使用一种模型没有多大意义。我为每个国家/地区添加了 selectedCities 属性。
• 我将您之前的 selectedCountries 和 selectedCities 转换为计算值。这些值可以从当前的 selectedCountries 派生，因为 selectedCities 是每个国家/地区的属性。在我看来，selectedCities(我将其变成originalSelectedCities)是一个相当无用的数据结构。如果您的城市顺序发生变化会发生什么？现在您不知道二维数组与哪些国家/地区相关联。