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 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