在 js 中监听 laravel livewire 生命周期钩子答案

【问题标题】：Listen the laravel livewire lifecycle hooks in js在 js 中监听 laravel livewire 生命周期钩子
【发布时间】：2022-01-22 12:17:18
【问题描述】：

有没有办法收听laravel livewire lifecycle hooks？比如……

在php中是：

 public function updatedFoo($value)
 {
    //
 }

如何在 js 中实现（我知道使用 @this 生成 id finder）？

window.Livewire.find('componentIdGenerated').on('updatedFoo', function(value) {
   //
});

非常感谢！

【问题讨论】：

标签： javascript php laravel dom laravel-livewire

【解决方案1】：

这是可能的，而且非常酷。正如文档所述，有一些 JavaScript 钩子相关，如

<script>
    document.addEventListener("DOMContentLoaded", () => {
        ....
        Livewire.hook('message.sent', (message, component) => {})
        Livewire.hook('message.failed', (message, component) => {})
        Livewire.hook('message.received', (message, component) => {})
        Livewire.hook('message.processed', (message, component) => {})
    });
</script>

比方说，你对某个方法进行了一些调用，并使用它可以获取消息挂钩并进行适当的操作

<script>
    document.addEventListener("DOMContentLoaded", () => {
       Livewire.hook('message.sent', (message,component) => {
          if (message.updateQueue[0].payload.method === 'openModal') {
             // message was sent 
          }
       Livewire.hook('message.received', (message,component) => {
          if (message.updateQueue[0].payload.method === 'openModal') {
             // message was received 
          }
       // and go on!
</script>

你也可以在事件发生时监听并做同样的事情

<script>
    document.addEventListener("DOMContentLoaded", () => {
       Livewire.hook('message.sent', (message,component) => {
          if (message.updateQueue[0].payload.event === 'someDispatchedEvent') {
             // message was sent 
          }
       Livewire.hook('message.received', (message,component) => {
          if (message.updateQueue[0].payload.event === 'someDispatchedEvent') {
             // message was received 
          }
       // and go on!
</script>

希望你能更多地利用这一点，向我们展示你的表现！ ;-)

【讨论】：

【解决方案2】：

感谢@Prospero 提供第一步和有关必要代码的总体思路

首先我们需要保存属性的初始状态（在我的例子中是一个模态组件，id 是动态的）：

括号中的变量为刀片变量）

...
@php
$id = $id ?? \Illuminate\Support\Str::random(15);
$model = $attributes->wire('model')->value()
@endphp
...

<script wire:ignore>
   var model{{ $id }};

   document.addEventListener("livewire:load", function(event) {
         model{{ $id }} = @this.{{ $model }};
   });
</script>

然后，使用 livewire 挂钩，您必须监听 element.updated 事件，并将初始状态与 livewire 属性的新状态进行比较

我只使用条件比较，我看到你可以使用Proxy 来获得干净的代码：

<script wire:ignore>
  document.addEventListener("DOMContentLoaded", () => {

      Livewire.hook('element.updated', (el, component) => {
          if(model{{ $id }} && !@this.{{ $model }})
              new bootstrap.Modal(document.getElementById('{{ $id }}')).hide();

          if(!model{{ $id }} && @this.{{ $model }})
              new bootstrap.Modal(document.getElementById('{{ $id }}')).show();

          model{{ $id }} = @this.{{ $model }};
      });
  });
</script>

我用它来打开一个引导模式刀片组件组件。

【讨论】：