vuejs 2.0.0でのプレースホルダー

Question

vuejs 2.0を使用してwebappを作成しています。私は、次のコードを使用して簡単な選択入力を作成しました：

<select v-model="age"> 
    <option value="" disabled selected hidden>Select Age</option> 
    <option value="1"> 1 Year</option> 
    <option value="11"> 11 Year</option> 
    </select> 

をし、私は私のVueのコンポーネントのdataでこれを持っている：

data() { 
    return { 
    age: "", 
    } 
}, 
watch: {  
    age: function (newAge) { 
    console.log("log here") 
    } 

しかし、私は選択のためのデフォルト値を追加するとき、このエラーを取得するために開始します。

./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template &インデックス内

ERROR = 0！/ src/components/cde.vue テンプレート構文エラー： インラインで選択された属性は、v-modelを使用すると無視されます。代わりにコンポーネントのデータオプションで初期値を宣言します。 ./~/babel-loader!./~/vue-loader/lib/selector.js @ 23から151

：./src/components/cde.vue 10 @

？ タイプ=スクリプト&インデックス= 0！./のsrc /ビュー/ abcView.vue @ ./src/views/abcView.vue

./src/router/index.js

@ @ ./ SRCは、/ Iは、次いで同様に成分のデータセクションにデフォルト値を与えることを試みたが、マルチアプリ

@ ./src/client-entry.js

@

をapp.jsないヒンジが起こった。私もv-bindを試しましたが、ウォッチャーは年齢変数の作業をやめました。

Answer 1

これがデフォルトoptionからselectedを削除した仕事に必要な唯一のもの：この質問に着陸することができる他の人のために

<select v-model="age"> 
    <option value="" disabled hidden>Select Age</option> 
    ..... 
    </select> 

Answer 2

、私が表示されるデフォルトのオプションを取得するための追加のステップがありました。私の場合、v-modelは、nullと空の文字列ではなく、返されていました。 。これはnullにこれを解決するために

Vueのバインディングがで蹴らたら、デフォルトのオプションが選択されなかったことを意味し、簡易バインドデフォルトのオプションのvalueプロパティ：

<select v-model="age"> 
    <option :value="null" disabled>Select Age</option> 
    ... 
</select> 

http://jsfiddle.net/2Logme0m/1/