[英]vue js how to set option value selected
我在选择选项输入中为我的应用程序使用 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>
使用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是由刀片造成的,不使用刀片时不应该这样做。
在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"
。
更新:正如Mikee建议的那样,而不是v-on="change:getMountain(formVariables.country_id);"
有一种绑定事件的新方法。 还有一个简短形式@change="getMountain(formVariables.country_id);"
您应该使用' 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
<select
class="breadcrumb_mountain_property"
id="country_id"
v-model="formVariables.country_id"
options="countryList">
</select>
您可以通过这种方式使用 select。 记得在 v-for 中使用数组。
<select v-model="album.primary_artist">
<option v-for="i in artistList" :key="i.id" :value="i.name">
{{ i.name }}
</option>
</select>
你可以使用这种方式。
<select v-model="userData.categoryId" class="input mb-3">
<option disabled value="null">Kategori</option>
<option
v-for="category in categoryList"
:key="category.id"
:value="category.id"
>
{{ category.name }}
</option>
</select>
export default {
data() {
return {
categoryList: [],
userData: {
title: null,
categoryId: null,
},
};
},
这里重要的是 categoryId 值是什么,默认选项值应该是那个。
categoryId: null,
<option disabled value="null">Kategori</option>
这里我们使用 categoryId 作为 v-model 中的值,并将其初始化为 null。 默认选项中的值必须为空。
<select v-model="userData.categoryId" class="input mb-3">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.