VueJS + element.eleme.ioel-selectのデフォルトオプション値を設定する方法

それを信じる

配列からデータを入力するためにv-forを使用するel-selectがあります。配列内の値をロードするときにデフォルト値を設定したいのですが、必要に応じて別の値を選択するオプションがあります...

コード

<el-select class="select-large" @change="getRate(recipient_type_id)" v-model="recipient_type_id"
      placeholder="Select">
     <el-option
        v-for="(item) in recipientDetails"
           :key="item.id"
           :label="item.display_name"
           :value="item.type_details">
     </el-option>
 </el-select>

配列はrecipientDetailsであり、プレースホルダーの代わりに最初にロードする必要があるデフォルトの受信者があります。

前もって感謝します

Chinonso Chukwuogor

selectでv-modelを使用selectedする場合、オプションで属性を使用することはできません

selectをrecipient_type_idバインドしたので、データがロードされたら、のアイテムを実行し、デフォルトである必要がrecipientDetailsあるtype_detailsプロパティを持つアイテムを見つけて、その値をrecipient_type_idlikeに割り当てることをお勧めします。

this.recipientDetails.forEach(detail => {
    if(detail.tpye_details == default_value){
        this.recipient_type_id = detail.type_details
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

show-word-limitプロパティが機能していません(element.eleme.io)

分類Dev

VueJs + Element UI:photo el-selectでデフォルト値を設定するにはどうすればよいですか?

分類Dev

vuejsでその日のデフォルトの日付を設定する方法

分類Dev

複数のオプションのデフォルトの選択値を設定する方法(ion-select)

分類Dev

選択オプションのデフォルト値を設定する方法

分類Dev

vuejsのデフォルト値として別のプロップ内でプロップを使用する方法

分類Dev

element-ui VueJSのDialogコンポーネントでopenイベントを処理する方法は?

分類Dev

HTMLのオプションのデフォルト値を設定する

分類Dev

VueJSのコンポーネントにフォーカスを設定する

分類Dev

Vuejsでv-selectオプションを動的に無効にする方法

分類Dev

Vuejsを使用して複数の選択オプション(ドロップダウン)からリストをフィルタリングする方法

分類Dev

VueJS の第 2 レベルのデータ プロパティを入力値に設定する方法は?

分類Dev

How to toggle any element in array in vuejs

分類Dev

vuejs test component with properties inside parent element

分類Dev

角度2-<select>のデフォルトの選択オプションを設定する方法

分類Dev

Vuejsでクリックされたすべてのボタン/オプションの日付セレクターを設定する方法

分類Dev

デフォルト値で値を設定するオプション

分類Dev

vuejsで選択オプション名属性を取得する方法

分類Dev

選択した選択のオプションで変数の値を変更する方法をVueJS

分類Dev

デフォルトを防ぎ、VueJSでデフォルトを送信する方法

分類Dev

TypeScriptは、HTMLCollectionOf <Element>、NodeCollection <Element>、googleオートコンプリートフォームのcssスタイルを設定します

分類Dev

オプションがオブジェクトで、デフォルトが整数IDの場合、デフォルトのngOptions値を設定する方法

分類Dev

element-ui vuejsで:errorを使用してvalidateStateを成功させる方法

分類Dev

Eclipse RCPアプリケーションの設定のデフォルト値を設定する方法

分類Dev

selectオプションを指定したvuejs2は、値とその他の属性を取得します

分類Dev

Vuejs選択オプションはフォームを送信します

分類Dev

webpackEncoreを使用してVueJSプロダクションモードを設定する方法

分類Dev

symfony:すべてのルートのデフォルトオプションを設定する方法は?

分類Dev

VueJS-リンクのクリック時にデフォルトを防止するだけでなく、オブジェクトをキャプチャする

Related 関連記事

  1. 1

    show-word-limitプロパティが機能していません(element.eleme.io)

  2. 2

    VueJs + Element UI:photo el-selectでデフォルト値を設定するにはどうすればよいですか?

  3. 3

    vuejsでその日のデフォルトの日付を設定する方法

  4. 4

    複数のオプションのデフォルトの選択値を設定する方法(ion-select)

  5. 5

    選択オプションのデフォルト値を設定する方法

  6. 6

    vuejsのデフォルト値として別のプロップ内でプロップを使用する方法

  7. 7

    element-ui VueJSのDialogコンポーネントでopenイベントを処理する方法は?

  8. 8

    HTMLのオプションのデフォルト値を設定する

  9. 9

    VueJSのコンポーネントにフォーカスを設定する

  10. 10

    Vuejsでv-selectオプションを動的に無効にする方法

  11. 11

    Vuejsを使用して複数の選択オプション(ドロップダウン)からリストをフィルタリングする方法

  12. 12

    VueJS の第 2 レベルのデータ プロパティを入力値に設定する方法は?

  13. 13

    How to toggle any element in array in vuejs

  14. 14

    vuejs test component with properties inside parent element

  15. 15

    角度2-<select>のデフォルトの選択オプションを設定する方法

  16. 16

    Vuejsでクリックされたすべてのボタン/オプションの日付セレクターを設定する方法

  17. 17

    デフォルト値で値を設定するオプション

  18. 18

    vuejsで選択オプション名属性を取得する方法

  19. 19

    選択した選択のオプションで変数の値を変更する方法をVueJS

  20. 20

    デフォルトを防ぎ、VueJSでデフォルトを送信する方法

  21. 21

    TypeScriptは、HTMLCollectionOf <Element>、NodeCollection <Element>、googleオートコンプリートフォームのcssスタイルを設定します

  22. 22

    オプションがオブジェクトで、デフォルトが整数IDの場合、デフォルトのngOptions値を設定する方法

  23. 23

    element-ui vuejsで:errorを使用してvalidateStateを成功させる方法

  24. 24

    Eclipse RCPアプリケーションの設定のデフォルト値を設定する方法

  25. 25

    selectオプションを指定したvuejs2は、値とその他の属性を取得します

  26. 26

    Vuejs選択オプションはフォームを送信します

  27. 27

    webpackEncoreを使用してVueJSプロダクションモードを設定する方法

  28. 28

    symfony:すべてのルートのデフォルトオプションを設定する方法は?

  29. 29

    VueJS-リンクのクリック時にデフォルトを防止するだけでなく、オブジェクトをキャプチャする

ホットタグ

アーカイブ