Laravel & Livewire：组件更改时如何执行 JavaScript 函数？

Question

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

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

这非常有效，因为show()组件中的方法将执行它所做的任何操作，绑定变量等等......

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

当我单击“其他”时item，它会显示数据，但图表不会更改其数据，它会保留第一次加载时获取的数据。

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

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

$this->dispatchBrowserEvent('contentChanged');

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

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

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

我应该怎么办？

Answer 1

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

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

然后您可以在 eventsdata属性中检索该信息，

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