VUE JS如何設置選項值選擇

我用我的選擇選項的應用VUE JS input..I需要設置默認值應在下拉選擇下來，而在變化我想打電話給兩個功能..VUE JS如何設置選項值選擇

我是新來的Vue JS ..

我的代碼：

var listingVue = new Vue({ 

el: '#mountain', 

data:{ 
     formVariables: { 
      country_id: '', 
      mountain_id: '', 
      peak_id: '' 
     }, 
     countrylist:[], 
     mountainlist:[], 

},   

ready: function() { 

    var datas = this.formVariables; 
    this.getCountry();  

}, 

methods: { 

    getCountry: function() 
     { 

      this.$http.get(baseurl+'/api/v1/device/getCountry',function(response) 
      { 
       this.$set('countrylist',response.result);  

       //alert(jQuery('#country_id').val());    
      }); 
     }, 
    getMountain: function(country_id) 
     { 
      var datas = this.formVariables; 
      datas.$set('country_id', jQuery('#country_id').val()); 
      postparemeters = {country_id:datas.country_id}; 
      this.$http.post(baseurl+'/api/v1/site/getMountain',postparemeters,function(response) 
      { 
       if(response.result) 
        this.$set('mountainlist',response.result); 
       else 
        this.$set('mountainlist',''); 
      }); 
     },

}）;

<select 
        class="breadcrumb_mountain_property" 
        id="country_id" 
        v-model="formVariables.country_id" 
        v-on="change:getMountain(formVariables.country_id);"> 
       <option 
        v-repeat = "country: countrylist" 
        value="@{{country.id}}" > 
        @{{country.name}} 
       </option> 
      </select>

來源

2015-11-03 Vijay

要選擇一個？從'重複的國家'？ –

查看一些Vue公司的選擇信息[Vuejs選擇DOC（http://vuejs.org/guide/forms.html#Select） –

您應該使用 'options' 屬性代替試圖V-重複3210：

data: {  
    countryList: [ 
    { text:'United States',value:'US' }, 
    { text:'Canada',value:'CA' } 
    ] 
}, 

watch: { 
    'formVariables.country_id': function() { 
    // do any number of things on 'change' 
    } 
}

HTML

<select 
    class="breadcrumb_mountain_property" 
    id="country_id" 
    v-model="formVariables.country_id" 
    options="countryList"> 
</select>

來源

2015-11-13 16:22:16

隨着vue 2，提供的答案將無法正常工作。我有同樣的問題，並且vue文檔對於<select>不太清楚。我發現<select>標籤正常工作的唯一辦法，就是這個（問題交談時）：

<select v-model="formVariables.country_id"> 
    <option v-for = "country in countrylist" :value="country.id" >{{country.name}}</option> 
</select>

我認爲，在@{{...}}在@ -sign是由於刀片，它不應該是必要的時候不使用刀片。

來源

2017-03-22 15:06:50 mvmoay

我發現使用這種方法，這是不可能的設置上載的「選擇」選項。我將其修改爲使用v-model =「formVariables.country」，其中country是完整的對象（例如{text：'United States'，value：'US'}），而不僅僅是值/ id。否則這真的很有幫助 - 它的文檔是非常小的......謝謝！ –

該文檔指出，「選定」狀態將被模型覆蓋。在渲染組件之前，我可以通過設置模型來設置選定的選項。此外，您可以嘗試強迫你的零件以'VM設置數據後更新$ forceUpdate（）'（其中虛擬機是您的組件，所以大概'這個$ forceUpdate（）'...。） – mvmoay

在VueJS 2可以綁定selected到你想要的默認值。例如：

<select 
    class="breadcrumb_mountain_property" 
    id="country_id" 
    v-model="formVariables.country_id" 
    v-on="change:getMountain(formVariables.country_id);"> 
    <option 
     v-for = "country in countrylist" 
     :selected="country.id == 1" 
     :value="country.id" > 
     {{country.name}} 
    </option> 
</select>

所以，countryList，與ID 1的國家的迭代期間將被選擇，因爲country.id == 1將是true，這意味着selected="true"。

來源

2017-05-10 10:44:26

感謝：選擇 –

這是不是意味着所有的項目選擇，因爲如果'selected'屬性存在，它會被選中，作爲屬性不需要值，只是它的存在。 –

VUE JS如何設置選項值選擇

回答

相關問題