Using data on dispatched event and trigger div - laravel

Question

I have a component that dispatches a browser event with an object
// Livewire Component Method
public function passToDashboard($dataId)
{
$data = Model::find($dataId);
$this->dispatchBrowserEvent('show-data', ['data' => $data]);
}
Now on my dashboard blade view i've got
<div class="some-classes" x-data="{dataDisplay:false}">
<div x-show="dataDisplay">
{{-- This is where i want to use the object --}}
{{ $data->title }}
</div>
</div>
<script>
window.addEventListener('show-data', data => {
console.log(data.detail.title); // outputs title just fine
})
</script>
The question is, how to 'unhide' the dataDisplay and how to show it with the passed data? Thanks!

Answer 1

You can listen for these events directly on the element using #event-name.window="dataDisplay = true"
To get the event data, you use the $event variable and it should be under $event.detail.data.title
Use x-text to get the text onto the element. See my full example below.
So in your case:
<div class="some-classes" x-data="{dataDisplay:false, title: ''}" #event-data.window="dataDisplay = true; title = $event.detail.data.title">
<div x-show="dataDisplay">
<h3 x-text="title"></h3>
</div>
</div>
The documentation for this can be found here: https://laravel-livewire.com/docs/2.x/events#browser
Do notice I changed the event name, because it does apparently not work if you start the event name with "show". When I changed to "event-data" or anything else it started working again.