Categories
Vue Answers

How to set add the selected attribute to an drop down option in Vue.js?

Spread the love

Sometimes, we want to set add the selected attribute to an drop down option in Vue.js.

In this article, we’ll look at how to set add the selected attribute to an drop down option in Vue.js.

How to set add the selected attribute to an drop down option in Vue.js?

To set add the selected attribute to an drop down option in Vue.js, we can add the selected attribute directly.

For instance, we write

<template>
  <select v-model="selected" required @change="changeLocation">
    <option selected>Choose Province</option>
    <option v-for="option in options" :value="option.id" :key="option.id">
      {{ option.name }}
    </option>
  </select>
</template>

to add the selected to the first option by writing

<option selected>Choose Province</option>

just like in regular HTML.

Conclusion

To set add the selected attribute to an drop down option in Vue.js, we can add the selected attribute directly.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *