vue js如何设置选项值选择

Question

我在选择选项输入中为我的应用程序使用 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>

原文由 Vijay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 vue 2，提供的答案不会那么好。我遇到了同样的问题，并且关于 <select> 的 vue 文档不是那么清楚。我发现 <select> 标签正常工作的唯一方法是（在谈到问题时）：

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

我假设 @{{...}} 中的 @-sign 是由于刀片，不使用刀片时应该没有必要。

原文由 mvmoay 发布，翻译遵循 CC BY-SA 3.0 许可协议