Vue イベントの $event パラメータ = イベント値の場合

Vue イベントの $event パラメータ = イベント値の場合

テンプレート

<el-table :data="データリスト">
 <el-table-column label="id" prop="id"></el-table-column>
 <el-table-column ラベル="名前" プロパティ="名前">
 <テンプレート v-slot="props">
  <el-入力番号
  :min="0"
  v-model="props.row.count"
  @change="製品を更新($event)"
  サイズ="ミニ"
 </el-input-number>
 </テンプレート>
 </el-table-column>
</el-table>

スクリプトセクション

エクスポートデフォルト{
 データ() {
 戻る {
  データリスト: [
  { id: 1、名前: '001'、カウント: 1 }、
  { id: 2、名前: '002'、カウント: 2 }、
  { id: 3、名前: '003'、カウント: 3 }、
  ]
 }
 },
 メソッド: {
 updateProduct(値) {
  console.info(値)
 }
 }
}

補足: Vue 学習ノート: イベントにおける $event オブジェクトの役割

Vue では、クリック イベントやその他のイベントをイベントに追加して、タグ要素の DOM を取得したり、タグの属性を変更したりすることができます。具体的な使い方は以下のとおりです。

1. $eventを通じてDOM要素を取得できる

html:

<button data-get="データボタン" @click="getRvent($event)">イベントオブジェクトを取得</button>

まず、$eventオブジェクトを出力して、どのようなプロパティを持っているかを確認しましょう。

srcElement は現在のラベル要素であり、この属性を使用して現在のクリック イベントのラベル要素を取得できます。

たとえば、次のように、ネイティブ js と同じように、取得した要素に対して操作を行うことができます。

 // イベントオブジェクトeを取得する
 getRvent(e){
  コンソールログ(e);
  e.srcElement.style.background="赤";
 }

クリックする前に:

クリック後:

2. さらに、ボタンのテキスト値を変更するなど、タグ自体のプロパティを変更することもできます。 このとき、$event の下の textContent を使用して変更します。

ボタンをクリックする前に:

ボタンをクリックした後:

3. 次のように、$event を通じてタグのカスタマイズの属性値を取得することもできます。

HTMLコード:

<button data-get="データボタン" @click="getRvent($event)">イベントオブジェクトを取得</button>

このボタンタグにはカスタム属性data-getがあり、今回は$eventの属性target.dataset.getに従って取得できます。

次のようにコンソールに印刷できます。

実際、要素自体の属性を使用して操作を実行し、クラスの追加などの操作を中止し、コードの冗長性を減らしてコードを改良できる場合もあります。

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

以下もご興味があるかもしれません:
  • VueコンポーネントにおけるEventBusの使い方と注意点
  • vue v-forは現在の行をクリックして、現在の行データとイベントの現在のイベントオブジェクトの操作を取得します。
  • Vue における $event の理解とフレームワークへのデフォルト値の組み込みについての簡単な説明
  • Uni で Vue の EventBus バス メカニズムを使用する
  • Vue コンポーネント間のイベント トリガー ($emit) とイベント バス ($on) の説明
  • eventemitter2 を使って Vue コンポーネント通信を実現する方法の詳細説明
  • Vue通信方式EventBusの詳細な実装コード

<<:  Docker で MySQL クラスターを構築する方法の例

>>:  MySql SQL最適化のヒントの共有

推薦する

ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...

主軸上のFlex子要素の比率を制御する方法

背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...

LED を使って Linux カーネルを使い始める方法を探る

目次序文LEDトリガー探索を始めるLEDデバイス登録LEDディレクトリ類推によって理解するクラスディ...

WindowsにJDK8をインストールする方法

1. ダウンロード: http://www.oracle.com/technetwork/java/...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...

ウォーターフォールレイアウト+ダイナミックレンダリングの実装

目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...

PHP スケジュールバックアップ MySQL および mysqldump 構文パラメータの詳細

まず、MySQL バックアップ コマンド mysqldump の一般的な操作例をいくつか紹介します。...

MySQL にテキストと画像を保存する方法

Oracle の大きなテキスト データ型 Clob 長いテキスト型 (MySQL ではサポートされて...

Linux で固定 IP を設定する方法 (テスト済みで効果的)

まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...

Nginx プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法

序文ゲートウェイプロジェクトを開発する場合、署名 sign_key 情報はリクエスト時にリクエスト ...

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

HTMLはフォームタグを使用して登録ページのサンプルコードを実装します。

ケースの説明: - ページ効果を実現するためにテーブルを使用する- ハイパーリンクを機能させたくない...

Vue プロジェクトで axios リクエストを使用する方法

目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...

VueはPCカメラを呼び出して写真機能を実現します

この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...

CSS シャドウ効果の比較: ドロップシャドウとボックスシャドウ

Drop-shadow と box-shadow はどちらも影効果(ハロー効果)のための CSS プ...