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如何设置选项值选择

回答

相关问题