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

環境：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

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