Best way to count visible items in x-for loop

[simonferndriger]

In this loop, there is a condition to show the element. At the bottom is a navigation to show more which should only appear if the number of visible items grows to "max" or above. What is the best way to know how many elements actually show up?

Example:
<template x-for="(flick, index) in list" :key="flick.id"> <figure x-data="listFlick(flick, type)" x-show="showSharedFlick(flick.id, email) && (!max || index < max)"> </figure> </template>

[simonferndriger]

I figured it is probably easiest to filter the list before looping through it... or is there another feasable approach?

[ekwoka]

Well, you wouldn't really be able to know otherwise what the total that might show would be if your show is also based on max existing.

Since the visible will only go to max...so you won't know how many exist beyond max doing it in this part of the logic.

[simonferndriger]

The real issue was to determine whether the number of visible items would actually go beyond max. But for the sake of the example you can just ignore "max".

[ekwoka]

Well, easiest would be doing a filter count separately.

actually you could use css, by having a attribute or class binding that is based on if it would show but is over the max. Then the fact that exists would tell you to show the button using a peer selector.

[simonferndriger]

Clever! You're just genious as always 😊