33

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>

dataVueコンポーネントにこれがあります：

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&index=0!./src/ のエラーcomponents/cde.vue テンプレート構文エラー: v-model を使用する場合、インラインで選択された属性は無視されます。代わりに、コンポーネントの data オプションで初期値を宣言してください。

@ ./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も試してみましたが、ウォッチャーは年齢変数の操作を停止しました。

4

6 に答える 6

47

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

これを解決するにvalueは、デフォルト オプションのプロパティを次のように単純にバインドしnullます。

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

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

于 2017-07-21T21:16:02.420 に答える
34

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

 <select v-model="age">
    <option value="" disabled hidden>Select Age</option>
    .....
  </select>
于 2016-11-02T09:28:32.027 に答える
8

デフォルト値にアクセスできない場合に備えて、Shivam Bisht に基づいて構築します。value="undefined" をプレースホルダー オプション タグに追加するだけです。

プレースホルダー テキスト

var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      param: undefined,
    };
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select v-model="param">
    <option value="undefined" disabled>Placeholder text</option>
    <option value="1">Dutch woman are beautiful.</option>
    <option value="11">German Men are slow.</option>
  </select>
</div>

于 2019-12-06T09:59:46.837 に答える
1

特定の条件ですべて正しいように見えるため、他の回答を追加するには: v-model 変数が期待するデータ型によって異なります。たとえば、 :value="null" または : value="undefined" は機能しますが、たとえばオブジェクトが必要な場合は、:value="{}" を渡す必要があります。

//Example: data/v-model expects integer
<select v-model="param">
   <option :value="undefined" disabled>Placeholder text</option>
   <option value="1">1</option>
   <option value="11">11</option>
</select>

//Example: data/v-model expects object
<select v-model="param">
   <option :value="{}" disabled>Placeholder text</option>
   <option
        v-for="item in items"
        :key="item.id"
        :value="item"
      >
        {{ item.propery }}
   </option>
</select>

文字列の null または未定義の値は機能するはずですが、データ オブジェクトでプレースホルダーを定義することもできます。

于 2021-01-14T01:39:25.427 に答える