当其他JS与alpine.js组件交互时，如何防止组件的重新初始化?

Question

我正在使用Alpine.js 3.2.1以及Glider.js carousel。我有一个问题与组件的双重初始化。当Glider carousel被初始化时，它第二次触发x-init函数。结果是，例如事件被触发两次，或者x-for模板被渲染两次。你有类似的问题吗?我如何防止这种行为?

Answer 1

我在与Alpine.js一起使用Glider.js时也遇到了这个问题

解决方案是在初始化滑翔机并手动添加轨道<div>时设置skipTrack: true。

这就不需要Glider删除已经初始化的DOM元素，然后将它们与新的父元素一起添加回去，这就是导致重新初始化的原因。

<div class="glider draggable">
<div class="glider-track">
<!-- Content here -->
</div>
</div>
new Glider(document.querySelector('.glider'), {
skipTrack: true
});