如何在Livewire组件更新并重新渲染后执行JavaScript方法？

问题根源 #

你之前的方案失效，是因为commit钩子的succeed阶段仅代表Livewire完成了数据提交与快照生成，DOM的实际更新操作还在异步队列中，queueMicrotask的执行时机依然早于DOM渲染完成的时间点。

方案一：精准触发（推荐） #

通过后端派发专属前端事件，确保仅在目标内容更新完成后执行方法：

1. 修正Child组件的事件派发
   原Child组件的updateContent方法未接收参数，导致父组件无法拿到子ID，先补上：

   // Child.php
   public function updateContent($id)
   {
       $this->dispatch('updateContent', $id);
   }
   

2. 父组件更新后派发前端事件
   在父组件的handleUpdateContent方法末尾，添加前端事件派发：

   // Parent.php
   public function handleUpdateContent($child_id): void
   {
       $this->content[$child_id] = $this->getSomeContent($child_id);
       // 通知前端内容已更新完成
       $this->dispatch('content-updated')->toBrowser();
   }
   

3. 前端监听事件执行方法
   替换原有的JS代码，监听这个专属事件：

   document.addEventListener('livewire:init', function () {
       Livewire.on('content-updated', () => {
           // 此时DOM已完全渲染新内容，可安全执行方法
           makeFinalAdjustments();
       });
   });
   

方案二：全局监听所有Livewire更新 #

如果需要在所有Livewire DOM更新后都执行方法，可以监听全局的livewire:update事件：

document.addEventListener('livewire:update', function () {
    makeFinalAdjustments();
});

注意：这个方案会在任何Livewire更新时触发，如果只需针对特定操作执行，优先选方案一。

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