I'm using Laravel 8 and Livewire. I have an application that shows items objects from a table. When you click on an item, it displays the item details to the right. This works great, since the show() method in the component will do anything it does, binding variables, and such... Now, in the details section, I want to make a

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

I’m using Laravel 8 and Livewire. I have an application that shows items objects from a table. When you click on an item, it displays the item details to the right.

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

This works great, since the show() method in the component will do anything it does, binding variables, and such…

Now, in the details section, I want to make a chart, a line chart. I have done it using d3js, and it works fine the first time I render the page, since my item variable has already a default value (last item in the table)

When I click on other item it shows the data, but the chart doesn’t change its data, it is stuck with the data it got the first time it loaded.

I followed some solutions that said I have to send a contentChanged event to the browser, but it doesn’t seem to work.

In my component, after changing the selection I have:

$this->dispatchBrowserEvent('contentChanged');

To simplify things, in my blade, I have:

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

Yes, it executes the function and show an alert, but the $item has the data from the first time the page was loaded. It doesn’t take the new $item that changed on click.

What should I do?

Answer

You can pass in data to the browser-event that is emitted,

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

Then you can retrieve that information in the events data attribute,

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

Advertisement

Answer