How to disable value on the select option ? (vue.js 2)
You should add option
directly in select
tag.
<select class="form-control" v-model="selected" required>
<option value="" disabled>Select a category</option>
<option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option>
</select>
Also, remove it from data
function.
data() {
return {
selected: '',
options: []
};
}
I don't recommend you to add this option in the options
array, because it is a placeholder
attribute for your select
.
Other option could be to disable that element using a binding
<option v-for="option in options"
:disabled="!option.id"
v-bind:value="option.id">
{{ option.name }}
</option>