Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。

 changelevel() //値を選択

選択を変更して行の値を変更したい場合

複数のイベントは

このとき、changelevel()が実行されていないことがわかったので、()を追加するとどうなるでしょうか。

 changelevel(val){ console.log(val) => //未定義}

パラメータが渡されず、出力が未定義であることを示します。

では、その値を誰に渡せばいいのでしょうか?

$eventを渡して再度出力し、選択された値を取得します。

追加: element-ui @change はカスタムパラメータを追加します

element-ui の変更イベントのデフォルトパラメータは値です。たとえば、ドロップダウンボックスの変更イベントのデフォルトパラメータは選択された値です。ただし、実際のプロジェクトでは、通常、複数のパラメータを渡す必要があります。2 つのパラメータを直接追加すると、取得できない場合があります。この場合、パラメータ内のデフォルトパラメータ名を $event に置き換える必要があります。

//最初のパラメータはデフォルト値パラメータで、2番目は渡したいパラメータです

@change='selectChange($event,scope.row)'

または、2 番目の方法を使用します。

 @change='(val)=>selectChange(値、スコープ行)'

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。

以下もご興味があるかもしれません:
  • element-uiでは、選択コンポーネントのバインディング値が変更され、変更イベントメソッドがトリガーされます。
  • vue elementUI が el-select を使用するときに変更イベントがトリガーされる問題を解決する
  • Vue 選択変更イベントでカスタムパラメータを渡す方法

<<:  Mysql5.7 サービスを開始できません。グラフィカル ソリューション チュートリアル

>>:  Nginx で WordPress 擬似静的を設定する方法の例

推薦する

Linux で txt を mysql にインポートする方法

序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

クラウドネイティブテクノロジーKubernetesスケジューリングユニットポッドの使用の詳細な説明

k8s の最小のスケジューリング単位 --- pod前回の記事では、k8s が解決できる問題を簡単に...

HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します

目次まず効果を見てみましょう:成し遂げる:要約:まず効果を見てみましょう: 成し遂げる: 1. ナビ...

IE6 で幅と高さがおかしいバグ

図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...

JSアルバム画像の揺れと拡大表示効果のサンプルコード

前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...

友達やグループを見つけるためのJavaScriptのLayim

現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非...

MySQL データをエクスポートおよびインポートするための HeidiSQL ツール

場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...

nacos が mysql に接続できない場合の解決策

理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...

Dockerコンテナの接続と通信の実装

ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...

Tomcatはスレッドプールを使用してリモート同時リクエストを処理します。

Tomcatが同時リクエストを処理する方法を理解することで、スレッドプール、ロック、キュー、および...

Web フォントの読み込みを最適化する方法をご存知ですか?

タイトル通りです!一般的に使用される font-family はブラウザの組み込みフォントを読み込み...

React 国際化 react-i18next の詳細な説明

導入react-i18next は、 i18nextをベースにした強力な国際化フレームワークです。 ...

JavaScript で二分探索木を実装する

JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...

Typescriptを使用してローカルストレージをカプセル化する方法

目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...