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);
});