如何将SimpleBar与Livewire结合使用？

Question

当将SimpleBar与livewire一起使用时，最初的呈现效果很好，但是在调用任何方法之后，它就停止工作了，但是SimpleBar的元素保持在那里，所以我不能像这样再次初始化它：

document.addEventListener("livewire:load", () => {
    Livewire.hook('message.processed', () => {
        new SimpleBar(document.getElementById('simplebar'));
    });
});

我使用高寒来初始化SimpleBar，如下所示：

<ul x-data x-init="new SimpleBar($root)" id="simplebar">
...
</ul>

有人对这种情况有经验吗？

Answer 1

我也有同样的问题。我用以下方法修正了：

<div id="myElement">
 {{ $slot }}
</div>

<script>
var myElement = document.getElementById('screenshot');
var simple = new SimpleBar(myElement, { autoHide:true });
</script>

您需要创建像上面这样的laravel组件。接下来，包装所有需要用livewire呈现的内容。

<x-my-laravel-component>
@livewire('mylivewirecomponent')
</x-my-laravel-component>

通过这种方式，livewire组件被封装，可以多次呈现，我尝试了livewire事件和其他方法，但找不到其他解决方案。我希望这是有用的