Как отключить значение в опции выбора? (Vue.js 2)

Question

Мой компонент, как это:

<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' 
     }] 
    }; 
    }, 
    ... 
}) 

Посмотреть полный код и демо здесь: https://fiddle.jshell.net/oscar11/stvct9er/5/

Я хочу, чтобы отключить "Выберите категорию". Так что «Выбрать категорию» отключено. Пользователь не может выбрать его. Пользователь может выбрать только значение, отличное от «Выбрать категорию».

Как я могу это сделать?

Answer 1

Вы должны добавить option непосредственно в тег select.

<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> 

Кроме того, удалить его из data функции.

data() { 
    return { 
    selected: '', 
    options: [] 
    }; 
} 

Я не рекомендую вам добавить эту опцию в options массиве, потому что это placeholder атрибут для вашего select.

Адрес working solution.

Answer 2

Другой вариант мог бы отключить этот элемент с помощью привязки

<option v-for="option in options" :disabled="!option.id" v-bind:value="option.id">{{ option.name }}</option> 

Working fiddle