Riot.jsで配列を飛ばしつつ回すと、正しいインデックスが取れない
Riot.jsを使っていろいろ組んでいたのですが、ちょっと想定外の挙動を食らってしまいました。
each
Riotのタグ内では、eachを使って配列を展開することができます（オブジェクトにも使えますが、今回の話題と関係ないので、とりあえずそちらは省略します）。
公式ガイドにも例が上がっていますが、
-
each={ arr }…arrの中身をオブジェクトとしてタグ内に展開 -
each={ item in arr }…arrの各要素をitemとして取得できる -
each={ item, i in arr }…arrの要素はitem、インデックスはiとして取れる
というようになっています。ただ、実際には最後のものに落とし穴がありました。
配列を飛ばしてみた
Riotのタグ内で直接使える制御構造はeachとifだけですが、「eachで回しつつ、ifで一部だけ取る」ようなことをしたくなることがあります。それでは実際にやってみましょう（バグ報告のPlunkerより引用）。
<my-tag>
<div each={label, i in labels} if={i!=0} >{i} : {label}</div>
<script>
this.labels = ['a', 'b', 'c']
</script>
</my-tag>
この<my-tag>をマウントすると、なんと「0:b、1:c」という表示になってしまって、配列のインデックスではなく表示される分だけのインデックスとなってしまいます。
回避策
とりあえず、「値が（バラバラなオブジェクトなど）全部違う」場合には、eachで取るインデックスの代わりに、Array.prototype.indexOfで配列から探すことで、応急措置にはなります（配列を走査するコストは発生しますが）。
外部リンク
Author And Source
この問題について(Riot.jsで配列を飛ばしつつ回すと、正しいインデックスが取れない), 我々は、より多くの情報をここで見つけました https://qiita.com/jkr_2255/items/4de028229c6a03c3d0b2著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .