如何检查 Livewire 事件是否完成答案

【问题标题】：How to check Livewire event is completed如何检查 Livewire 事件是否完成
【发布时间】：2023-02-08 02:39:09
【问题描述】：

我有 3 个组件地图、字段和部分。地图是父组件。 Field & Section 是子组件。

Field 组件中有一个名为testField 的操作。在 test 函数中，首先我想在 Section 组件上触发一个事件 SaveSection 然后继续其他事情。

// In field component
public function testField(): void
{
    // Save section
    $this->emitTo('section', 'saveSection');
    Log::debug('Testing.....');

}

// In section component
public function saveSection()
{
    Log::debug('saveSection+++++');
    $this->emitTo('map', 'storeSection', $this->section, $this->sectionIndex);
}


// In map component
public function storeSection(array $section, int $sectionIndex)
{
    Log::debug('storeSection-----');
    // Store to DB
    ....
}

但它在storeSection----- 之前打印Testing.....。有什么办法可以让我等到事件结束后再继续。

【问题讨论】：

您是否发出 livewire 事件并试图检测事件何时被处理？
@mrtorks 是的，类似的东西。我想在保存数据后进行测试。

标签： laravel-livewire

【解决方案1】：

嗨，根据我们的谈话，我想你会想要连接到 Livewire 并监听消息处理的事件。第一步是将 Log::debug('Testing.....'); 包装在这样的函数中

public function testLog()
{
  Log::debug('Testing.....');
}

您可能希望将其调整到您满意的程度，因为这只是一个建议。

现在您需要准备您的应用程序以在结束正文标记之前在基本视图中堆叠脚本。例如在 app.blade.php 中这样

<body>
 ...//Whatever thats before it
  @stack('scripts')
</body>

这将帮助您堆叠您将在组件视图中定义的自定义脚本标签。在此之后，您现在可以使用 Livewire 挂钩。正确执行此操作以避免 DOM 差异问题，因为 Livewire 会在您的开发人员控制台中哭泣：

<script>
document.addEventListener('livewire:load', function () {
 Livewire.hook("message.processed", (message, component) => {
if (message.updateQueue[0].payload.event === "storeSection") {
// I have not implemented it this way so try any of them
            @this.emit('testLog') or @this.call('testLog')
        }
    });
 })
</script>

这将显示 Testing....`` after storeSection``` 已处理。如果这不起作用，请务必告诉我，因为我可能必须实施更改。

【讨论】：