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最適化のヒントの共有

推薦する

div の水平レイアウトを両側に揃える 3 つの方法

この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...

Dockerで同じIDを持つ2つのイメージを削除する

今日 Docker コンテナを作成したとき、誤ってイメージの名前を間違って入力しました。その結果、コ...

Vue Nativeを使用したモバイルアプリケーションの構築プロセスの完全な記録

目次序文Vue Nativeの機能宣言的レンダリング双方向バインディングVue.js エコシステムの...

Windows 10 と MySQL 5.5 のインストールとインストールなしの使用の詳細なチュートリアル (画像とテキスト)

この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...

HTML <!--...--> コメントタグの役割の詳細な分析

多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメン...

Linuxカーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法

プロセス アドレス空間の分離は、現代のオペレーティング システムの注目すべき機能です。これは、「古い...

gorm で MySql データベースを操作する方法

1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...

Windows (コミュニティ エディション) に MySQL 8.0.18 をインストールするためのチュートリアル

この記事では、Windows で MySQL をインストールする方法について簡単に説明します。他にご...

Docker を使用した RabbitMQ 環境のデプロイの詳細な紹介

前提条件: Dockerはすでにインストールされています1. 画像を見つける(方法は2つあります) ...

mysqldump でデータベースをバックアップするときに特定のライブラリを除外する例

例: mysqldump –all-databases を使用すると、すべてのライブラリがエクスポー...

MySQL フルテキスト検索の中国語ソリューションとサンプルコード

MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...

Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード

# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...

MySQL サーバーの接続、切断、および cmd 操作

mysql コマンドを使用して MySQL サーバーに接続します。 MySQL サーバーが起動したら...

XHTMLコードの一般的なアプリケーション問題をまとめる

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

Mysqlの日付と時刻関数を扱う記事

目次序文1. 現在の時刻を取得する1.1 現在の日付と時刻を返す1.2 現在の日付を取得する1.3 ...