Vue js how to set parameter value

Question

I am using vue js for my application in a select input element. I need to set the default value, which should be selected in the drop-down list, and during the change I would like to call two functions.

I am new to vue js ..

My code is:

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>

Answer 1

With vue 2, the provided answer will not work so well. I had the same problem and the vue documentation is not so clear in relation <select>. The only way I found for tags to <select>work correctly is (when it comes to the question):

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

, @- @{{...}} , , .

Answer 2

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 1 , country.id == 1 true, selected="true".

Answer 3

You should use the attribute ' options' instead of trying 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>