Alpine: Strange bug with tiny slider

[maximelebreton]

Hello,

I wanted to build a simple carousel with Alpine and Tiny slider.

<div class="slider">
        <template x-for="(item, index) in items" :key="index">
          <div x-text="'Slide ' + index"></div>
        </template>
</div>

But when I init the Tiny slider function (after mount),
the item & index variables inside the <template x-for> became undefined...

But if I have something outside the loop, there is no problem.

Maybe it's because tiny-slider get container direct childs, and try to parse the <template> because he's not removed after parsing).

But I can't find a way to pass trough.

Is removing the template tags after parsing could be a solution?

Here a reproduction case:
https://codesandbox.io/s/nostalgic-star-erdtz?file=/index.html

And here is the related issue link on Alpine's repository: https://github.com/ganlanyuan/tiny-slider/issues/584

Thanks.

[SimoTod]

Hi @maximelebreton
Unfortunately is not possible to remove the template tag for now. Alpine doesn't have a virtual DOM like Vue or React so it needs to use the standard DOM to "remember" a directive between interactions.

However, I don't think the template tag is the problem (at least, not the main one).
Looking at the code it seems that, when you start tiny slider, the third party libraries move the element 19 before the template tag so, when Alpine repaints the component, it treats the element as a normal directive and tries to resolve the not existent index variable.

[SimoTod]

As a separate note, the main use cases for x-for are:

• your list is dynamic and you can add/delete/update/reorder it without reloading the page.
• your data comes from a json api after the page has been loaded.

For the majority of (if not all) the other use cases, you are better off generating the final html serverside rather then asking the browser to recalculate it after.

[ryangjchandler]

@maximelebreton Did you have anymore problems or thoughts on this one after @SimoTod provided some insights. I agree that x-for shouldn't be used if the content isn't being mutated or retrieved on the client, it's generally best to use a server side template engine.

[richgcook]

I also came across the same issue when using https://github.com/nolimits4web/swiper and concluded that if the data isn't being mutated or retrieved on the client then to resort to server side. I was getting too reliant on using Alpine like I use vue; building layouts from a single large data source.

[calebporzio]

Thanks for weighing in, I think we can close this now