Javascript vue js 如何设置选中的选项值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33491971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vue js how to set option value selected
提问by Vijay
I'm using vue js for my application in select option input..I need to set default value should be selected in the drop down and while on change i would like to call two functions ..
我在选择选项输入中为我的应用程序使用 vue js..我需要设置默认值应该在下拉列表中选择，而在更改时我想调用两个函数..
I'm new to vue js..
我是 vue js 的新手..
My Code :
我的代码：
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>
回答by mvmoay
With vue 2, the provided answer won't work that well. I had the same problem and the vue documentation isn't that clear concerning <select>. The only way I found for <select>tags to work properly, was this (when talking of the question):
使用 vue 2，提供的答案不会那么好用。我遇到了同样的问题，vue 文档对<select>. 我发现<select>标签正常工作的唯一方法是（在谈论问题时）：
<select v-model="formVariables.country_id">
<option v-for = "country in countrylist" :value="country.id" >{{country.name}}</option>
</select>
I assume, that the @-sign in @{{...}}was due to blade, it should not be necessary when not using blade.
我认为，@-sign in@{{...}}是由于刀片造成的，不使用刀片时应该没有必要。
回答by Mahdi A. Bolow
In VueJS 2 you can bind selectedto the default value you want. For example:
在 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>
So, during the iteration of the countryList, the country with the id 1 will be selected because country.id == 1will be truewhich means selected="true".
因此，在 countryList 的迭代过程中，将选择 id 为 1 的国家/地区，因为country.id == 1will be truewhich mean selected="true"。
UPDATED:
As Mikeesuggested, instead of v-on="change:getMountain(formVariables.country_id);"there is a new way to for binding events. There is also a short form @change="getMountain(formVariables.country_id);"
更新：正如Mikee 所建议的，不是v-on="change:getMountain(formVariables.country_id);"有一种新的方法来绑定事件。还有一个简短的形式@change="getMountain(formVariables.country_id);"
回答by Douglas.Sesar
You should use the 'options' attribute in place of trying to v-repeat <option></option>:
您应该使用 ' options' 属性代替尝试 v-repeat <option></option>：
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
HTML
<select
class="breadcrumb_mountain_property"
id="country_id"
v-model="formVariables.country_id"
options="countryList">
</select>
