CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Limna
Limna

Reputation: 403

How to Set Default Value in Dropdownlist in Vue.js

How do I set the first option as a default value in dropdownlist? 

<select :disabled=true class="custom-select" v-model="Status">
      <option disabled value>Select Any</option>          
      <option v-for="status in statusList" v-bind:value="{StatusId:status.StatusId,StatusName:status.StatusName}" :key="status.StatusId">{{ status.StatusName }}</option>                    
</select>

Here v-model="Status" is an object. So, when I have set it like below It's not working:

data() {
    return {            
        Status: 1                                   
    };
},

Here, 1 is the id of first option.

Upvotes: 1

Views: 373

Answers (1)

Dan
Dan

Reputation: 63059

Status needs to be an object as well if you want it to match.

data() {
  return {            
    Status: { StatusId: 1, StatusName: 'name' }                           
  }
}

All of the properties of your default Status will need to match one of the options in order for it to be selected.

But note that there is probably no good reason here to use this pattern of setting the option value to an object. Better to set it to the StatusId, and use that selected id or a computed to process the option wherever you need to use it.

Upvotes: 1

Related Questions