title: Laravel & Livewire: How to execute a javascript function when the component changes?
body: <p>I'm using Laravel 8 and Livewire. I have an application that shows <code>items</code> objects from a table. When you click on an <code>item</code>, it displays the <code>item</code> details to the right.</p>
  <pre><code>&lt;ul&gt;
  @foreach ($items as $item)
    &lt;li wire:click=&quot;show({{ $item-&gt;id }})&quot; class=&quot;...&quot;&gt;
        {{ $item-&gt;name }}
    &lt;/li&gt;
  @endforeach
  &lt;/ul&gt;
  </code></pre>
  <p>This works great, since the <code>show()</code> method in the component will do anything it does, binding variables, and such...</p>
  <p>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 <code>item</code> variable has already a default value (last item in the table)</p>
  <p>When I click on other <code>item</code> 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.</p>
  <p>I followed some solutions that said I have to send a <code>contentChanged</code> event to the browser, but it doesn't seem to work.</p>
  <p>In my component, after changing the selection I have:</p>
  <pre><code>$this-&gt;dispatchBrowserEvent('contentChanged');
  </code></pre>
  <p>To simplify things, in my blade, I have:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    window.addEventListener('contentChanged', e =&gt; {
      alert('{{ $item-&gt;name }}')
    })
  &lt;/script&gt;
  </code></pre>
  <p>Yes, it executes the function and show an alert, but the <code>$item</code> has the data from the first time the page was loaded. It doesn't take the new <code>$item</code> that changed on click.</p>
  <p>What should I do?</p>