2016-12-13 11 views
8

カスタム属性をオプション選択メニューにバインドします。 <option>タグは、単にこれは動作しませんが、私はv-bind:classv-bind:selectedを変更した場合、それは適切なクラスを受けて、そのロジックはselected属性での作業ではなく、selected="selected"オプション選択メニューにデフォルト値を設定

<template> 
    <div> 
    <select> 
     <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option> 
    </select> 
    </div> 
</template> 

data: { 
    selected: "selected", 
    notSelected: "" 
} 

の属性を持っているでしょう。

このようなカスタム属性を使用する方法はありますか?

マークアップ:

<div id="app"> 
    <select v-model="selected"> 
    <option value="foo">foo</option> 
    <option value="bar">Bar</option> 
    <option value="baz">Baz</option> 
    </select> 
</div> 

ビューモデル:

new Vue({ 
    el: "#app", 
    data: { 
    selected: 'bar' 
    } 
}); 
ここ

だJSFiddle:

答えて

17

あなただけの選択ボックスで、デフォルト値を選択するためのv-modelを使用することができますhttps://jsfiddle.net/Lxfxyqmf/

関連する問題