Livewire组件刷新后自定义JS脚本失效，如何实现组件加载时执行脚本？

核心原因 #

Livewire执行$refresh时会重新渲染组件DOM，原来内嵌的<script>代码不会重复执行；而livewire:initialized仅在Livewire首次初始化时触发一次，组件刷新不会触发该事件，所以之前的尝试无效。

有效解决方案 #

方案1：监听livewire:update事件

每次组件DOM更新完成后，livewire:update事件会触发，将你的JS逻辑放在这个事件监听回调里，确保刷新后重新执行。

<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'
            });
        }
    }
}

// 监听组件更新完成事件，每次刷新后执行JS逻辑
document.addEventListener('livewire:update', () => {
    // 调用你的滚动函数（替换成实际要触发的类名）
    // scrollToRow('target-row-class');
    // 其他自定义JS逻辑也放在这里
    ...
});
</script>

方案2：正确使用@script指令

Livewire的@script指令会确保包裹的JS代码在每次组件渲染（包括刷新后）都执行，只需将你的脚本放在@script和@endscript标签之间：

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

@script
<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'
            });
        }
    }
}

// 执行你的自定义逻辑
scrollToRow('target-row-class');
// 其他JS代码
...
</script>
@endscript

注意事项

• 如果函数定义会重复触发（比如每次刷新都重新定义），可以将核心函数放在全局作用域（比如页面根脚本中），避免重复定义问题。
• 若需要针对特定组件的刷新事件，可使用livewire:component-updated事件，并指定组件名：

  document.addEventListener('livewire:component-updated', (event) => {
      if (event.detail.name === 'YourComponentName') {
          // 执行对应组件的JS逻辑
      }
  });
  

内容的提问来源于stack exchange，提问作者rjcode