LoginSignup
0
0

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-11

始めに

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

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>
0
0
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0