Javascript Vue js在选择其他下拉列表时保留下拉列表值

您好，我有一个下拉列表（选择国家），我想当我选择一个国家时，我会在一个新的下拉列表中看到这个国家的城市（现在下拉列表的总数：2），当我选择第二个国家时，我想看到这个国家的其他城市的下拉列表，所以我现在总共有3个下拉列表。 我这里的问题是，当我选择一个国家和一个城市时，我的选择会在选择其他国家后失效。 我如何解决这个问题？ 我正在使用multiselect in country下拉列表和simple select in cities下拉列表

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

newvue({
el:“应用程序”，
数据：函数（）{
返回{
选定国家：[]，
选择选项国家/地区：[
{值：3，名称：'法国'}，
{值：5，名称：'USA'}，
{值：6，名称：'加拿大'}，
{值：8，名称：'摩洛哥'}
],
选定城市：[]，
选择选项城市：[]
}
},
方法：{
},
观察：{
所选国家/地区：功能（新值、旧值）{
this.selectoptions城市=[]；
this.selectedCities=[]；
for（var i=0，length=newValue.length；i

选定国家：{{selectedCountries}


选定城市：{{selectedCities}


{{option.name}
{{option.name}

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>

选定国家：{originalSelectedCountry}


选定城市：{originalSelectedCities}


{{country.name}
{{city.name}

这是工作表

以下是要点

• 我将与每个国家相关的城市移动到该国的数据中。这样，自然地构建select流，而不必观察所选的国家
• 由于您有多个选定城市集，因此尝试对所有城市集使用一个模型没有多大意义。我在每个国家/地区添加了一个

  selectedCities

  属性
• 我将以前的

  selectedCountries

  和

  selectedCities

  转换为计算值。这些值只能从当前的

  selectedCountries

  中导出，因为

  selectedCities

  是每个国家的属性。在我看来，

  selectedCities

  （我把它变成了

  originalSelectedCities

  ）是一个相当无用的数据结构。如果你所在城市的顺序发生变化，会发生什么？现在您不知道二维阵列与哪些国家相关

---

您的选择框模型似乎正在按照您的要求进行操作，并在将selectedCities设置为空阵列时清除

如果稍微更改一下数据结构，就可以简化代码。试试这个，明白吗

---

非常感谢您的重播，我在控制台中遇到此错误：[Vue warn]：属性或方法“originalSelectedCountry”未在实例上定义，但在渲染期间被引用。请确保在数据选项中声明被动数据属性。@Codinga我的示例没有该警告。你错过了一段代码吗？没有，我什么也没有错过控制台告诉我必须在数据选项中声明originalSelectedCountry，这是通过在数据之后声明计算变量修复的，现在我得到了这个错误：TypeError:country.selectedCities.map不是一个函数：/@Codinga

originalSelectedCountry

是一个计算值，它不需要基于数据。有没有什么地方我能看到你在写什么代码

selectedCities

需要初始化为数据结构中的空数组。我只有在选择城市时才会出现此错误，这是我的js代码：

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

<div id="app" class="container">
  <div class="row">
    <div class="col-xs-12">
      Selected countries : {{ selectedCountries }}
      <br />
      Selected cities : {{ selectedCities }}
      <br />
      <hr/>
      <select v-model="selectedCountries" 
         multiple class="form-control">>
        <option v-for="(option, index) in selectOptionsCountries" 
          :value='option.value'>
          {{ option.name }}
        </option>
      </select>
      <select v-model="selectedCities" multiple class="form-control">
        <!-- inline object literal -->
        <option v-bind:value="city.value" 
           v-for="(city, index) in selectOptionsCities"
           v-show="selectedCountries.indexOf(city.parent) > -1">
          {{ city.name }}
        </option>
      </select>
    </div>
  </div>
</div>

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: [
        { value: 31, name: 'Paris', parent:3 },
        { value: 32, name: 'Marseille', parent:3 },
        { value: 51, name: 'New-York', parent:5 },
        { value: 52, name: 'Boston', parent:5 },
        { value: 61, name: 'Montreal', parent:5 },
        { value: 62, name: 'Vancouver', parent:6 },
        { value: 63, name: 'Ottawa', parent:6 },
        { value: 64, name: 'Toronto', parent:6 },
        { value: 81, name: 'Rabat', parent: 8 },
        { value: 82, name: 'Casablanca', parent: 8 },
        { value: 83, name: 'Fes', parent: 8 }
      ]
    }
  }
});