How to Set Default Value in Dropdownlist in Vue.js

Question

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.

Dan · Accepted Answer · 2020-02-25 10:40:53Z

1

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.

edited Feb 25, 2020 at 10:40

answered Feb 25, 2020 at 10:35

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Set Default Value in Dropdownlist in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related