:if renders additional/unwanted elements?
I have a construct like this:
<ul class="d:g(3/16)">
<li class="block" :each="obj in occasion_data.rsvp.items">
<img alt="" :src="obj.user.avatar.profile" />
<div>
<h5 :text="!obj.user.first_name || !obj.user.last_name ? obj.user.login : obj.user.first_name + ' ' + obj.user.last_name"></h5>
</div>
<a :href="obj.user.view_href">Connect</a>
</li>
<!-- CTA block displays when there are less than 3 attendees -->
<li class="block" :if="occasion_data.rsvp.items.length < 3">
<img alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
<div>
<h5 :text="occasion_data.rsvp.items.length === 0 ? 'Be the first to attend!' : 'Attend as well!'"></h5>
</div>
<a :href="#">RSVP</a>
</li>
<!-- These are dummy items to fill up the grid when there is zero or one participants -->
<li class="dummy0" :if="occasion_data.rsvp.items.length === 0"><li>
<li class="dummy1" :if="occasion_data.rsvp.items.length <= 1"><li>
</ul>
It does work mostly, but only because the unwanted/additional elements are empty <li>'s, otherwise it would cause more problems. What I'm seeing in the inspector is this:
e.g. those <li> </li> ones I did not define and they only appear if I have the dummy li's in the markup:
<li class="dummy0" :if="occasion_data.rsvp.items.length === 0"><li>
<li class="dummy1" :if="occasion_data.rsvp.items.length <= 1"><li>
those are rendered correctly (in this case) but where are the additional 2 li's coming from? is this a bug or am i doing something the wrong way?
that's possibly a bug, yes. Long if chains with intermediate elements may possibly lose active state. I may need to modify or redefine :if chain. It would be helpful to have minimal reproducible test.
@exside it's because you have unclosed <li class="dummy0" :if="occasion_data.rsvp.items.length === 0"><li> in your HTML. <li> is optionally closing tag, so whenever it sees extra <li> it closes itself and opens a new li. Please check if that's the issue.
duh... I should have seen that...fixes the problem...sorry about the fake news bug report! Thanks!