Sometimes, we want to set the selected option of a drop down in Vue.js.

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

How to set the selected option of a drop down in Vue.js?

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

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">
      {{ option.name }}
    </option>
  </select>
</template>

to add the selected attribute to the first option.

Conclusion

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