Events bubbling up to all instances of component

What seems to be the problem: I have a bunch of instances of a component on my page, like so:

...for loop...
@livewire('fulfillment-confirmation-modal', $kid->id)
 ...for loop...

and my fulfillment confirmation modal looks like this:

<div>
<a href="#" wire:click="$emit('showModal')">Täidan soovi</a>
<div class="w-screen h-screen bg-gray-200 fixed top-0 left-0 opacity-25 {{ $this->isOpen == false ? "hidden" : ""}}"></div>
</div>

And PHP:

<?php

namespace App\Http\Livewire;

use App\Kid;
use Livewire\Component;

class FulfillmentConfirmationModal extends Component {

public $isOpen = false;

private $kid_id;

protected $listeners = ['showModal' => 'open'];

public function open() {
    $this->isOpen = true;
}

public function mount($selected_kid) {
    $this->kid_id = $selected_kid;
}

public function render()
{
    return view('livewire.fulfillment-confirmation-modal', [
        "kid" => Kid::find($this->kid_id),
    ]);
}
}

Problem is, now I click the link and, hey presto, the event runs on every single instance of the component :confused: How could I fix this?

Are you using the latest version of Livewire: Yes, installed it today

Do you have any screenshots or code examples: See above

Why not have a single instance of the modal and just have it show the appropriate data based on what was clicked. You can pass a parameter like a model id through the event bus.

Yea, that works, ty!

1 Like

Awesome. Happy to help

1 Like