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

始めに

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

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>
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.