How to disable value on the select option ? (vue.js 2)
20,862
Solution 1
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
.
Solution 2
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>
Author by
moses toh
Updated on July 05, 2022Comments
-
moses toh almost 2 years
My component is like this :
<div id="demo"> <div> <select class="form-control" v-model="selected" required> <option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option> </select> {{selected}} </div> </div> var demo = new Vue({ ... data() { return { selected: '', options: [{ id: '', name: 'Select Category' }] }; }, ... })
See full code and demo here : https://fiddle.jshell.net/oscar11/stvct9er/5/
I want disable "Select Category". So "Select category" disabled. User can not select it. User can only choose a value other than "Select Category".
How can I do it?
-
Vishal Vaghasiya about 4 yearsThank you for information about
:disabled="!option.id"
.