Riotタグ内でイベントハンドラを仕掛けた場合、普通のイベントオブジェクトに加えてitemというメンバが入っていることがあります。
ループ時の対応
以前、Riotのeach=で配列を管理していたときに、途中で飛ばすとインデックスがずれるという問題が起きたのですが、その過程で、「each内部で回したものが、イベントオブジェクトで取れる」ことが判明しました。
e.itemの中身
回し方によって、入ってくるものが違います。
-
each={arr}のように、変数名指定なしの場合…e.item自体がarrの要素として入っていたオブジェクトになる -
each={item in arr}のように値だけ取る形にした場合…e.item.itemに配列の要素が入る -
each={item, i in arr}のように値と順番を取るようにした場合…e.item.itemに配列の要素、e.item.iに回した分だけのインデックスが入る
なお、値はシャローコピーなので、配列の要素が配列などオブジェクト型だった場合、イベントハンドラ内からそのまま破壊的に変更することで、元の配列要素を変更することも可能です。
イベントセットの方法
e.itemがセットされるのは、ネイティブでaddEventListenerした場合には動かず、タグ内でon***={}のようにした場合に限られます。on***でセットできないカスタムイベントの場合は、使えないということになります。
子タグからの駆動
よくあるパターンとして、「特殊な入力フォームをRiotで作って、それを親タグで使う」というようなものが考えられます。ネイティブでchangeイベントが発生するような状況の場合、子タグ自体にonchangeを仕掛けておくと、バブリングで上がってきた分もRiot経由で処理して、itemが入ります。
一方で、子タグのJavaScriptコードで値を書き換えたような場合、changeイベントは発生しませんので、同様な動作を期待するのなら自力で発生させる必要があります。