Javascript Vue js在更改主选项时填充新选项

我需要你的帮助来使用vue js填充或加载新的select，我知道如何使用jquery来实现这一点，但在vue中我不知道如何实现，因为我是这个库的新手

我有主要的选择：

<select>
   <option value='3'>FRANCE</option>
   <option value='5'>USA</option>
   <option value='6'>CANADA</option>
   <option value='8'>MOROCCO</option>
</select>

}))

在html中：

<div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-medium-1-4">
        <label for="attribute">Countries</label>
        <md-select name="country" id="country" v-model="country">
            <md-option v-for="country in countries" :value="country.country_id">@{{ country.name }}</md-option>
        </md-select>
    </div>
</div>


<div class="uk-grid" data-uk-grid-margin>
    <my-cities v-for="n in range"></my-cities>
</div>

<script type="x-template" id="my-cities">
    <div class="uk-width-medium-1-4">
        <label for="attr">Cities</label>
        <md-select name="attr" id="attr" v-model="attr">
            <md-option value="">Select </md-option>
            <md-option value="val in values">Select</md-option>
        </md-select>
    </div>
</script>

国家
@{{country.name}
城市
挑选
挑选

---

在JSFIDLE上有这样一个示例：

这是一个可以使用的示例（但需要一些修改才能使用API调用）：

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}
在作者评论后添加：

检查这把小提琴：

在“chosenCities”数组中，您可以按国家选择所有城市（每个国家一个城市）

原始答案：

下面是一个例子：

这就是你想要达到的目标吗

setTimeout函数只是假装真正的数据获取

<script src="//unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<template>
<div>
  <select v-model="country">
    <option disabled value="">Please select one</option>
    <option
      v-for="c in countries"
      :value="c.id">{{ c.name }}</option>
  </select>
<span>Selected: {{ country }}</span>
<span  v-if="cities.length">Cities:</span>
<ul v-if="cities.length">
<li v-for="c in cities">{{ c }}</li>  
</ul>
</div>
</template>
</div>

<script>
var Main = {
    data() {
      return {
        country: {},
        countries: [],
        cities: [],
        coInit: [{ id: '3', name: 'France' }, { id: '2', name: 'USA' }], 
        cFrance: ['Paris', 'Whatever'], 
        cUSA: ['NY', 'LA'] 
      }
    },
    methods: {
        loadCountries: function () {
        setTimeout(() => { this.countries = this.coInit }, 500);
      },
      getCities: function() { 
      if(this.country) {
        switch (this.country) {
            case '3': 
            setTimeout(() => { this.cities = this.cFrance }, 500);
            break;
          case '2': 
            setTimeout(() => { this.cities = this.cUSA }, 500);
            break;
        }
      }
      }
    },
    mounted() {
        this.loadCountries(); 
    },
    watch: {
        country: function() { 
        this.getCities();
      }
    }
  }
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');
</script>


请选择一个
{{c.name}}
选定：{{country}
城市：

{{c}

var Main={
数据（）{
返回{
国家：{}，
国家：[]，
城市：[]，
硬币：[{id:'3'，名称：'France'}，{id:'2'，名称：'USA'}]，
法国：[“巴黎”，“随便什么”]，
库萨：['NY'，'LA']
}
},
方法：{
loadCountries:函数（）{
setTimeout（（）=>{this.countries=this.coInit}，500）；
},
getCities:函数（）{
如果（这个国家）{
交换机（此国家/地区）{
案例“3”：
setTimeout（（）=>{this.cities=this.cFrance}，500）；
打破
案例“2”：
setTimeout（（）=>{this.cities=this.cUSA}，500）；
打破
}
}
}
},
安装的（）{
这是loadCountries（）；
},
观察：{
国家：功能（）{
这个。getCities（）；
}
}
}
var-Ctor=Vue.extend（主）；
新的Ctor（）.$mount（'#app'）；
有什么帮助吗……？您的代码与您的任务无关。请澄清：你们从数据库得到了什么样的响应，你们如何请求数据。您希望从db接收哪些数据到您的Vue应用程序中以进行操作。好的，我现在编辑问题以了解更多解释。现在已经完成，您可以重新检查问题吗？向上我确实需要帮助：/谢谢您的回答，但我想要的是，在选择法国和选择美国之后，我希望法国仍然选择dom，因此，在选择法国和选择美国之后，我希望总共有3个国家选择一个，法国城市选择第二个，美国选择最后一个cities@Codinga在我的示例中，您可以同时选择法国和美国。奇怪的用户体验行为必须选择法国，然后美国选择法国和美国的城市。因此，如果您出错并单击法国但您不想要法国城市，那么删除法国城市的方法是什么？使用vue js后，我不能这样做？例如，如果我想删除法国城市的下拉列表？在您的示例中，您在同一下拉列表中推送城市？我需要的是创建一个其他下拉列表，每个国家都有他的onw下拉列表？例如，如果我有7个国家，并且我选择了所有国家，我将在我的html国家下拉列表和7个其他下拉列表（城市下拉列表）中显示是的，当然已经完成了。我在方法中创建了一个函数，可以完成所有这些工作，我只是想看看我所做的是不是一个好的实践，一旦我完成了这项工作，我将返回给你们。谢谢你，谢谢你的回复，但我想要的是在选择法国之后，选择美国之后，我希望法国仍然在dom中选择，因此，在选择法国和选择美国后，我希望总共有3个国家选择一个，法国城市选择第二个，美国城市选择最后一个。我也不能在getCities中使用开关，因为我不知道我有多少国家，所以问题是我需要一些东西dynamic@Codinga，开关仅用于示例目的，当然getCities（）是您需要根据“国家”（即国家id）获取城市的地方
<div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-medium-1-4">
        <label for="attribute">Countries</label>
        <md-select name="country" id="country" v-model="country">
            <md-option v-for="country in countries" :value="country.country_id">@{{ country.name }}</md-option>
        </md-select>
    </div>
</div>


<div class="uk-grid" data-uk-grid-margin>
    <my-cities v-for="n in range"></my-cities>
</div>

<script type="x-template" id="my-cities">
    <div class="uk-width-medium-1-4">
        <label for="attr">Cities</label>
        <md-select name="attr" id="attr" v-model="attr">
            <md-option value="">Select </md-option>
            <md-option value="val in values">Select</md-option>
        </md-select>
    </div>
</script>

<script src="//unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<template>
<div>
  <select v-model="country">
    <option disabled value="">Please select one</option>
    <option
      v-for="c in countries"
      :value="c.id">{{ c.name }}</option>
  </select>
<span>Selected: {{ country }}</span>
<span  v-if="cities.length">Cities:</span>
<ul v-if="cities.length">
<li v-for="c in cities">{{ c }}</li>  
</ul>
</div>
</template>
</div>

<script>
var Main = {
    data() {
      return {
        country: {},
        countries: [],
        cities: [],
        coInit: [{ id: '3', name: 'France' }, { id: '2', name: 'USA' }], 
        cFrance: ['Paris', 'Whatever'], 
        cUSA: ['NY', 'LA'] 
      }
    },
    methods: {
        loadCountries: function () {
        setTimeout(() => { this.countries = this.coInit }, 500);
      },
      getCities: function() { 
      if(this.country) {
        switch (this.country) {
            case '3': 
            setTimeout(() => { this.cities = this.cFrance }, 500);
            break;
          case '2': 
            setTimeout(() => { this.cities = this.cUSA }, 500);
            break;
        }
      }
      }
    },
    mounted() {
        this.loadCountries(); 
    },
    watch: {
        country: function() { 
        this.getCities();
      }
    }
  }
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');
</script>