1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Vue.js】v-forの中でe.targetを使用してみた時のメモ

Last updated at Posted at 2022-01-02

環境:vue2

やりたいこと

v-forを使用して、ボタンとなる要素を複数作成。
ボタンのいずれかをクリックした際に、クリックしたボタンだけ色が変わる。

上記内容を、e.targetを使わない場合と使う場合とで比較してみたい。

e.targetを使わない場合

See the Pen button color change(vur.js sample) by monji (@monji88) on CodePen.

これでも別に悪くはないけどforEachとaddEventListnerを両方使うので少し冗長な感じがする。

e.targetを使う場合

See the Pen Untitled by monji (@monji88) on CodePen.

こちらのほうがシンプルだしわかりやすいと思う。 (ほかにいい感じの方法あれば教えてもらえると嬉しいです)

e.targetについての補足事項

e.targetは、生のJavaScriptで使用する場合は
<button onclick="change(event)">ボタン</button>
といった感じで()の中に引数を入れてあげる必要がある。
でもvueの場合は()ごと省略して@ckick="change"でも動作する。
ちなみに省略しない場合は(event)ではなく($event)とする必要があるらしい。

そのあたりをわかりやすくまとめて下さってる記事様↓

e.targetについての補足事項2

対象要素内に子要素がある場合などはイベントが伝播されるので注意。
そのあたりをわかりやすくまとめてくださってる記事様↓

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?