vue js how to set option value selected

Question

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

I'm new to 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>

Answer 1

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

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

Answer 2

In VueJS 2 you can bind selected to the default value you want. For example:

 <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 == 1 will be true which means selected="true" .

UPDATED: As Mikee suggested, 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);"

Answer 3

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

Answer 4

You can use select in this way. Remember to use array in v-for.

  <select v-model="album.primary_artist">
        <option v-for="i in artistList" :key="i.id" :value="i.name">
          {{ i.name }}
        </option>
  </select>

Answer 5

You can use this way.

<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,
      },
    };
  },

The important thing here is what the categoryId value is, the default option value should be that.

categoryId: null,
<option disabled value="null">Kategori</option>

Here we use categoryId as value in v-model and initialize it with null. Value must be null in default option.

<select v-model="userData.categoryId" class="input mb-3">