Laravel 和 Livewire：组件更改时如何执行 javascript 函数？答案

【问题标题】：Laravel & Livewire: How to execute a javascript function when the component changes?Laravel 和 Livewire：组件更改时如何执行 javascript 函数？
【发布时间】：2021-12-13 01:26:02
【问题描述】：

我正在使用 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。

我该怎么办？

【问题讨论】：

标签： javascript php laravel laravel-livewire

【解决方案1】：

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

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

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

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

【讨论】：