组件重新加载后重新加载自定义脚本

Question

我有一个 livewire 组件，在组件刀片文件中有自定义 JS，并且我提供了一个用于刷新组件的按钮。

问题是，当我单击刷新按钮时，它不会执行自定义脚本，但此自定义脚本仅适用于第一页或第一个组件加载，

我一点击

Refresh

，就不起作用了，回到默认状态。

如何实现组件加载时执行的脚本？

我尝试过

@script

，

document.addEventListener('livewire:initialized', () => {

，但没有成功。

<div>
  <button type="button" class="btn btn-sm btn-light" wire:click="$refresh">Refresh</button>
</div>
<script>

    function scrollToRow(className) {
        var rowsToScroll = document.getElementsByClassName(className);
        var tableContainer = document.querySelector('.table-container');
        if (rowsToScroll.length > 0 && tableContainer) {
            for (var i = 0; i < rowsToScroll.length; i++) {
                var element = rowsToScroll[i];
                var elementRect = element.getBoundingClientRect();
                var containerRect = tableContainer.getBoundingClientRect();
                var scrollableTop = elementRect.top - containerRect.top + tableContainer.scrollTop;
                var middle = scrollableTop - (containerRect.height / 2) + (elementRect.height / 2);
                tableContainer.scrollTo({
                    top: middle,
                    behavior: 'smooth' // Optionally, to scroll smoothly
                });
            }
        }
    }

...
//Some many JS ...

</script>

Answer 1

您需要添加 livewire 监听器。 添加到您的 JS 代码

   document.addEventListener('livewire:initialized', () => {
        @this.on('scrollToRow', (className) => {
            // rest of your code
        });
    });

然后，在你的 livewire 组件中你需要添加刷新功能

$this->dispatch('scrollToRow', 'yourClassNameParam');