我在选择选项输入中为我的应用程序使用 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,所提供的答案将无法正常工作。我遇到了同样的问题,关于 <select>
的 vue 文档不是很清楚.我为 <select>
找到的唯一方法标签正常工作,是这样的(在谈论这个问题时):
<select v-model="formVariables.country_id">
<option v-for = "country in countrylist" :value="country.id" >{{country.name}}</option>
</select>
我假设 @{{...}}
中的 @-sign是blade的缘故,不使用blade的时候应该不需要。
关于javascript - vue js如何设置选中的选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33491971/