Vue + 要素を使用して背景データをオプションに動的に表示する

Vue + 要素を使用して背景データをオプションに動的に表示する

必要:

ハードコードされたデータの代わりに、セレクター内のオプション値の動的な表示を実装します。私のロールIDデータは次のとおりです。

ここに画像の説明を挿入

これらのデータリクエストをオプションに表示する必要があります

実装は次のとおりです。

element-ui でセレクターを使用します。

<el-form-item label="ロールID:" prop="roleId">
    <el-select v-model="addUserForm.roleId" placeholder="ロールIDを選択してください">
      <el-オプション
          v-for="roleList 内の項目"
          :key="アイテム.値"
          :label="アイテム.ラベル"
          :value="アイテムの値">
      </el-option>
    </el-select>
</el-form-item>

データ内の空の配列をカスタマイズします。

ここに画像の説明を挿入

メソッドにデータを実装するためのリクエストを記述します。

ロールリストを取得する() {
   getRoleList(this.name).then(res => {
     結果を res.data.items とします。
     console.log("ロールリストを取得します: " +JSON.stringify(this.roleList));
     結果.forEach(要素 => {
     	this.roleList.push({label:要素名,value:要素名});
     });
     }).catch( エラー => {
       コンソール.log(エラー);
  });
},

作成された実装の表示:

ここに画像の説明を挿入

getRoleList は私がカプセル化した get リクエストです。

ここに画像の説明を挿入

結果は次のとおりです。

ここに画像の説明を挿入

Vue + 要素を使用して背景データをオプションに動的に表示する方法についてはこれで終わりです。Vue 要素の動的オプションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+Element uiはバックグラウンドの戻りデータに応じて動的なヘッダー操作を設定します
  • Vue+elementは、3階層のメニューページを表示する操作を実装するために動的読み込みルーティングを使用します。

<<:  Linux FTP匿名アップロードとダウンロードが自動的に開始される問題を解決する

>>:  MySQL 8.0.11 Mac 用インストール ガイド

推薦する

Linuxにログインする際の文字セットの問題を解決する方法

文字セットエラーは常に存在するロケール: LC_CTYPE をデフォルト ロケールに設定できません:...

JS の 6 つの継承方法とその長所と短所

目次序文プロトタイプチェーン継承コンストラクタの継承組み合わせ継承(プロトタイプチェーン継承とコンス...

Docker のポート解放失敗の解決策

今日、非常に奇妙な状況に遭遇しました。docker イメージを更新した後、docker-compos...

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル

Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...

offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft などのプロパティの図。

注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...

moment.jsの時間と日付の処理の詳細な説明

月曜日から日曜日の時間形式の変換(Y --- 年 M --- 月 D--- 日) : : : : :...

IE6 および IE7 で DIV コンテナの固定高さを使用するためのヒント

IE6 と IE7 では CSS の解釈に多くの違いがあります。今日はそのうちの 1 つである高さに...

CentOS 8.0.1905 は ZABBIX 4.4 バージョンをインストールします (検証済み)

Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...

mysql explain(分析インデックス)の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

MySQL 8.0.18 インストール構成の最適化チュートリアル

MySQLのインストール、設定、最適化は参考用です。具体的な内容は次のとおりです。 MySQL ダウ...

MySQL ルートパスワードを変更する 4 つの方法 (要約)

方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...

nginxを使用して画像サイズを動的に変換し、サムネイルを生成します。

Nginx ngx_http_image_filter_module モジュール (nginx バ...

MySQL マスタースレーブレプリケーションの遅延の原因と解決策

目次レプリケーション ロジックの簡単な概要:遅延の原因と解決策〇メインデータベースへの頻繁なDMLリ...

Vue で $attrs と $listeners を使用するチュートリアル

目次導入例要約する導入$属性すべての親コンポーネントのプロパティを継承します (props を通じて...