Sometimes, we want to set the selected option of a select dropdown in Vue.js.
In this article, we’ll look at how to set the selected option of a select dropdown in Vue.js.
Set the Selected Option of a Select Drop Down in Vue.js
We can set the selected option of a selected drop with the v-model directive.
For instance, we can write:
<template>
<div id="app">
<select v-model="selected">
<option :value="1">apple</option>
<option :value="2">orange</option>
<option :value="3">grape</option>
</select>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selected: 2,
};
},
};
</script>
We have the selected reactive property and set its value to 2.
Then in the template, we have the select element with the v-model directive to bind the selected value to the selected reactive property.
We have the value prop which sets the value of each option.
Since we set selected to 2, the ‘orange’ option should be selected initially since the value prop value matched the value of selected .
Conclusion
We can set the selected option of a selected drop with the v-model directive.