Javascript vue js如何设置所选的选项值

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

}))

@{{country.name}

您应该使用“

选项”

”属性来代替尝试v-repeat

：

VM

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>

---

对于vue 2，提供的答案不会那么有效。我也有同样的问题，vue文档中关于

的内容也不太清楚。我发现

标记正常工作的唯一方法是（在谈到这个问题时）：

{{country.name}

---

我假设，@-sign-in

@{…}

是由blade引起的，不使用blade时不需要它。

在VueJS 2中，您可以将

所选

绑定到所需的默认值。例如：

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

{{country.name}

因此，在countryList的迭代过程中，将选择id为1的国家，因为

country.id==1

将为

true

，这意味着

selected=“true”

更新：

---

正如所建议的那样，有一种新的方式来绑定事件，而不是使用

v-on=“change:getMountain（formVariables.country_id）；”。还有一个简短的表单
@change=“getMountain（formVariables.country_id）；”
您想选择哪一个？从
v-repeat country
？查看我使用此方法找到的一些Vue select信息，无法在加载时设置“selected”选项。我修改了它，使用v-model=“formVariables.country”，其中country是完整的对象（例如{text:'United'，value:'US'}），而不仅仅是value/id。否则这真的很有用-关于它的文档非常少。。。非常感谢。文档声明，“选定”状态将被模型覆盖。我能够通过在渲染组件之前设置模型来设置所选选项。此外，您可以尝试在使用
vm.$forceUpdate（）
设置数据后强制组件更新（其中vm是您的组件，因此可能
此。$forceUpdate（）
…）这不意味着所有项目都被选中，因为如果
selected
属性存在，它将被选中，由于属性不需要值，只需要它的存在性。谢谢，@Mikee这是真的，让我更新答案以显示执行此操作的新方法。为什么我们应该使用选项而不是v-for？我在使用v-for中找到了价值，因为它允许我在遍历对象时分别绑定：value和：label。
<select v-model="formVariables.country_id">
  <option v-for = "country in countrylist" :value="country.id" >{{country.name}}</option>
</select>

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