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.