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 を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。