Edited at

Riot.jsでif={v}入れてeachすると自動的にFilterされる

More than 1 year has passed since last update.


始めに

最初に、下記のようなロジックを組んで実行したところ結果がおかしかった


tag

<test>

<div each={v,i in test} if={v}>index:{i},val:{v}</div>
<script>
var self = this;
self.test = [1,0,1,1];
</script>
</test>


想定していた出力

index:0,val:1

index:2,val:1
index:3,val:1


出力されたもの

index:0,val:1

index:1,val:1 ←indexが1になってしまっている…
index:2,val:1

存在するはずのindex1の値が消えてしまっている。

挙動からすると、each内にif={}があるとその条件でFilterされたものを回しているっぽい…


対策

どうしても理想を叶えたいならこうとかすれば良いと思います


tag

<test>

<div each={v,i in test} class={non:!v}>index:{i},val:{v}</div>
<style>
.non{
display: none;
}
</style>
<script>
var self = this;
self.test = [1,0,1,1];
</script>
</test>

こんな感じでif={}を使わずにstyleで消す。


対策2

@clown0082 さんから頂いたご意見。

こちらのほうがスマートですね。

ありがとうございました!


tag

<test>

<div each={v,i in test} show={v}>index:{i},val:{v}</div>
<script>
var self = this;
self.test = [1,0,1,1];
</script>
</test>