JavaScript 内容更改后停止执行 - Laravel Livewire

Question

我有一个javascript代码来制作一个滑块，在滑块内部，通过livewire调用方法时内容发生变化，问题是在调用它时，滑块爆炸了，并且javascript 代码无效。

查看：

@foreach($section->children()->get() as $subSection)
  <button wire:click="serviceChanger({{ $subSection->id }})">{{ $subSection->name }}</button>
@endforeach

@foreach($services as $service)
the services here changes depending on the serviceChanger method
@endforeach

javascript

  <script>
        var swiper = new Swiper('.swiper-container', {
                slidesPerView: 1,
                spaceBetween: 10,
                // init: false,
                pagination: {
                el: '.swiper-pagination',
                clickable: true,
                },
                breakpoints: {
                640: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 50,
                },
                }
        })
  </script>

组件：

public function serviceChanger($id)
{
  // some logic
}

在我调用 ServiceChanger 后，javascript 在服务更改时将不起作用。有什么想法吗？

Answer 1

我通过在 serviceChanger 方法结束时调度浏览器事件解决了我的问题

$this->dispatchBrowserEvent('contentChanged');

在 JavaScript 文件中捕获这样的事件

window.addEventListener('contentChanged', event => {
        // your JS code
});

当 Livewire 刷新内容时，您需要 re-initialize 您的 javaScript 代码。
当livewire将DOM中的HTML替换为你新的HTML时，JS代码的none执行
您必须手动确保一切再次执行

有关更多信息，请查看 Livewire Event

JavaScript 内容更改后停止执行 - Laravel Livewire

JavaScript Stop Executing after the content changes - Laravel Livewire

javascript

laravel

swiper

laravel-livewire