web-dev-qa-db-ja.com

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

vuejs 2. を使用して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")
  }

しかし、selectにデフォルト値を追加すると、このエラーが発生し始めます。

./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template&index=0!./src/のエラーcomponents/cde.vueテンプレート構文エラー：v-modelを使用する場合、インラインで選択された属性は無視されます。代わりに、コンポーネントのデータオプションで初期値を宣言します。

@ ./src/components/cde.vue 10：23-151

@ ./~/babel-loader!./~/vue-loader/lib/selector.js？ type = script＆index = 0！./ src/views/abcView.vue @ ./src/views/abcView.vue

@ ./src/router/index.js

@ ./src/app.js

@ ./src/client-entry.js

@マルチアプリ

コンポーネントのデータセクションにもデフォルト値を指定しようとしましたが、何も起こりませんでした。私は試した v-bindまた、ウォッチャーは年齢変数の作業を停止しました。

javascriptselectvue.jsvuejs2
17
Saurabh

これを機能させるために必要なのは、デフォルトのselectedからoptionを削除することだけです。

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

この質問にたどり着くかもしれない他の人のために、デフォルトのオプションを表示するための追加のステップがありました。私の場合、v-model私は、空の文字列ではなく、nullを返していました。これは、デフォルトのオプションが一度も選択されなかったことを意味していましたVueバインディングが開始されました。

これを解決するには、デフォルトオプションのvalueプロパティをnullにバインドするだけです：

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

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

21
Albert Martin