Laravel & Livewire：如何在组件变化时执行一个javascript函数？

Question

我正在使用 Laravel 8 和 Livewire。我有一个应用程序显示来自 table 的 items objects。当您单击 item 时，它会在右侧显示 item 详细信息。

<ul>
@foreach ($items as $item)
  <li wire:click="show({{ $item->id }})" class="...">
      {{ $item->name }}
  </li>
@endforeach
</ul>

这很好用，因为组件中的 show() 方法会做任何事情，绑定变量等等...

现在，在详细信息部分，我想制作一个图表，一个折线图。我已经使用 d3js 完成了它，并且在我第一次呈现页面时它工作正常，因为我的 item 变量已经有一个默认值（table 中的最后一项）

当我点击其他 item 时它会显示数据，但图表不会更改其数据，它停留在第一次加载时获得的数据。

我按照一些解决方案说我必须向浏览器发送一个 contentChanged 事件，但它似乎不起作用。

在我的组件中，更改选择后我有：

$this->dispatchBrowserEvent('contentChanged');

为了简化事情，在我的 blade 中，我有：

<script type="text/javascript">
  window.addEventListener('contentChanged', e => {
    alert('{{ $item->name }}')
  })
</script>

是的，它执行函数并显示警报，但是 $item 具有第一次加载页面时的数据。它不需要点击时更改的新 $item。

我该怎么办？

Answer 1

您可以将数据传递给发出的浏览器事件，

$this->dispatchBrowserEvent('contentChanged', ['item' => $item]);

然后您可以在事件 data 属性中检索该信息，

window.addEventListener('contentChanged', (e) => {
    alert(e.detail.item.name);
});

Laravel & Livewire: How to execute a javascript function when the component changes?