sprae icon indicating copy to clipboard operation
sprae copied to clipboard

:if renders additional/unwanted elements?

Open exside opened this issue 8 months ago • 3 comments

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:

Image

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?

exside avatar Apr 23 '25 13:04 exside

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.

dy avatar Apr 23 '25 16:04 dy

@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.

dy avatar Apr 24 '25 00:04 dy

duh... I should have seen that...fixes the problem...sorry about the fake news bug report! Thanks!

exside avatar Apr 25 '25 16:04 exside