Alpine JS and Template Tags

[jhinden]

Hi there, I'm using Alpine JS and would like to use x-for (similar to vue) for my 'splide_slides', however this breaks the structure and the li don't get updated (are not seen by Splide). Is there some solution/workaround ('ignore element' etc.)?
For example:
template x-for="(item, index) in items"
li
img
li

[jhinden]

Came up with a hacky solution that works ok, which is just to detect if the template has all the slides, then move it up one level before init splide. Required a bit of fiddling to get the ordering right, but seems to work ok for now. Would be nice if there was a data attribute like 'ignore' for such cases.

[NaotoshiFujita]

I don't have knowledge about Alpine, but there is the unofficial integration package.
https://github.com/Accudio/alpine-splide

I think their code would be helpful.

[jhinden]

Cool, yeah I'd seen and tried that already (and another). Only solution that worked for me was the one mentioned above. Basically Alpine uses tag with for each loop (similar to vue), and so that's breaking the structure if you want to loop through slides. Moving it out of the way during detection solved the problem though, so all good. Just a bit hacky. Cheers, cool plugin!

[alexr8]

@jhinden could you elaborate on your approach here about moving it up one level? Do you mean moving the element outside the splide__list before init-ing the slider? If i do that, it takes the slides with it (they then render outside of the splide__list).