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

【问题标题】：How to prevent reinitialization of component when other JS is interacting with alpine.js components?当其他 JS 与 alpine.js 组件交互时，如何防止组件重新初始化？
【发布时间】：2022-01-12 10:14:51
【问题描述】：

我将 Alpine.js 3.2.1 与 Glider.js 轮播一起使用。我遇到了组件的双重初始化问题。当 Glider carousel 被初始化时，它会第二次触发 x-init 函数。结果是例如事件被触发两次或 x-for 模板呈现两次。你有类似的问题吗？如何防止此类行为？

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

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

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

这消除了 Glider 删除已经初始化的 DOM 元素然后将它们重新添加到导致重新初始化的新父元素的需要。

<div class="glider draggable">
    <div class="glider-track">
        <!-- Content here -->
    </div>
</div>

new Glider(document.querySelector('.glider'), {
  skipTrack: true
});

【讨论】：