Vue公司JS改变主一个

Question

我需要你的有关填充或加载与VUE JS新选择帮助时，填充新的选择，我知道如何使用jQuery做，但在VUE我不知道如何，因为我是新用这个库。

我有主要选择：

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

我想，如果我选择法国，我收到了选择法国的城市，从数据库，并且还当我选择美国我得到一个其他的选择，从数据库中美国城市。

因此，例如，我会得到：

<select> 
    <option value='6'>CANADA</option> 
    <option value='8'>MOROCCO</option> 
</select> 

<select> 
    <option value='34'>France city one</option> 
    <option value='35'>France city two</option> 
</select> 

<select> 
    <option value='3'>Usa city one</option> 
    <option value='5'>Usa city two</option> 
</select> 

当选择法国和美国，我将填充select城市与阵列

我感谢所有帮助，我不真的知道我可以与VUE JS做到这一点， 我不希望添加的所有选择城市在我的HTML，因为我不知道我有多么的国家都有。

我试过，但这个没有解决我probleme：

const addProduct = new Vue({ 
el: '#addProduct', 
data: { 
    name: '', 
    name_url: '', 
    cities: '', 
    countries: [], 
    range: 0 
}, 
created: function() { 
    this.$http.get('/api/countries').then(response => { 
     this.countries = response.data 
    }, response => { 

    }); 
}, 
methods: { 
    addForm: function(val, data) { 
     this.range += 1; 
     alert(this.range) 

     var index = _.findIndex(this.countries,{city_id: val}); 
     this.countries.splice(index, 1) 
    } 
}, 
watch: { 
    'cities' (val, oldVal) { 
     this.$http.post('/api/cities/values', {city_id:val}).then(response => { 
      this.addForm(val, response.data); 
     }, response => { 

     }); 
    } 
} 

}）;

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

上的jsfiddle这样一个例子：http://jsfiddle.net/pu8pp62v/3/

Answer 1

这是你也许可以使用（但需要一些修改，使用API​​调用）的例子：

new Vue({ 
 
    el: "#app", 
 
    data: function() { 
 
    \t return { 
 
    \t selectedCountries: [], 
 
    \t selectOptionsCountries: [ 
 
     \t { value: 3, name: 'FRANCE' }, 
 
     { value: 5, name: 'USA' }, 
 
     { value: 6, name: 'CANADA' }, 
 
     { value: 8, name: 'MOROCCO' } 
 
     ], 
 
     selectedCities: [], 
 
     selectOptionsCities: [] 
 
    } 
 
    }, 
 
    methods: { 
 
    \t 
 
    }, 
 
    watch: { 
 
    selectedCountries: function(newValue, oldValue) { 
 
     this.selectOptionsCities = []; 
 
     this.selectedCities = []; 
 
    
 
     for(var i = 0, length = newValue.length; i < length; i++){ 
 
     
 
     this.selectedCities[i] = []; 
 
     
 
     \t 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' }] 
 
     ) 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script> 
 

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

增加作者的评论后：

检查此琴：http://jsfiddle.net/jjpfvx5q/1/

里面 'chosenCities' 点阵你把所有入选城市按国家

原来的答复（每个国家一个城市。）：

下面是一个例子：fiddle

那是你想要达到的目标吗？

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>