選択オプションで値を無効にする方法は？ （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: [] 
    }; 
} 

私はそれがあなたのためにselectplaceholder属性であるため、options配列にこのオプションを追加することはお勧めしません。

ここはworking solutionです。

Answer 2

その他のオプションは、私がモバイル上だそう完全な答えを投稿することはできませんが、十分OPTGROUPます結合

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

Working fiddle