Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

Riot.jsのイベントオブジェクトに入ってくるitem

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イベントは発生しませんので、同様な動作を期待するのなら自力で発生させる必要があります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?