I am trying to show a timeline using the timeline component, since the timeline is goint to be pretty big, I tried to use the intersection component so each timeline entry will only be in the DOM when “seen”, so I have something like this:
<div class="q-px-lg q-py-md">
<q-timeline color="secondary">
<!-- START: list -->
<q-intersection
v-for="item in allItems"
:key="`item-${item.id}`"
class="example-item"
>
<q-timeline-entry
:title="item.product?.name"
:subtitle="item.legend"
>
<div>
{{ item.desc }}
</div>
</q-timeline-entry>
</q-intersection>
<!-- END: list -->
</q-timeline>
</div>
I see the intersection component working, but the timeline doesnt have the connecting lines, its missing the q-timeline__dot::after
CSS,
Am I missing something? should I use the directive instead and do the DOM add/remove with it?