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

Posted 2023-02-22

【中文标题】Laravel 和 Livewire：组件更改时如何执行 javascript 函数？

【英文标题】：Laravel & Livewire: How to execute a javascript function when the component changes?

【发布时间】：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。

我该怎么办？

【参考方案1】：

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

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

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

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