始めに
最初に、下記のようなロジックを組んで実行したところ結果がおかしかった
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
存在するはずのindex
が1
で0
の値が消えてしまっている。
挙動からすると、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>