CODEWITHSUNDEEP
javascriptvue.js
Vijay
Vijay

Reputation: 141

vue js how to set option value selected

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>

Upvotes: 14

Views: 46314

Answers (5)

&#199;ağlar YILMAZ
&#199;ağlar YILMAZ

Reputation: 161

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

Upvotes: 1

Ali Raza
Ali Raza

Reputation: 1063

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>

Upvotes: 0

Mahad Ahmed
Mahad Ahmed

Reputation: 309

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);"

Upvotes: 10

mvmoay
mvmoay

Reputation: 1625

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.

Upvotes: 19

Douglas.Sesar
Douglas.Sesar

Reputation: 4420

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>

Upvotes: 3

Related Questions