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>