如何解决内容更改后,JavaScript停止执行-Laravel Livewire
我有一个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将无法工作。 有任何想法吗?
解决方法
我通过在serviceChanger
方法末尾调度浏览器事件来解决我的问题
$this->dispatchBrowserEvent('contentChanged');
在JavaScript中,像这样捕获事件
window.addEventListener('contentChanged',event => {
// your JS code
});
-
Livewire刷新内容时,您需要重新初始化JavaScript代码。
-
当livewire用新的HTML替换DOM中的HTML时,没有JS代码会执行
-
您必须手动确保一切再次执行
有关更多信息,请查看Livewire Event
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。