Start a discussion
Back
ReplySubscribe
Alpine.jsGo to solution

Passing Parameter Data to Global Modal with Alpine.js Laravel Livewire

I recently followed the tutorial "Global Modals with Livewire and Alpine.js" (https://codecourse.com/watch/global-modals-with-livewire) to add a modal to my project. Everything is working great, but I am now trying to determine how I can pass a parameter to the modal so I can display info from the database in the modal.

I have a page with a table listing football players. When the player name is clicked a modal is triggered using the method explained in the tutorial.

<button x-data="{}" x-on:click="window.livewire.emitTo('components.player-modal', 'showModal')">{{ $player->first_name . ' ' . $player->last_name }}</button>

I want to pass that "$player" record to the modal and haven't been able to find anything online to assist. Would I use the button's x-on:click to pass the data?

Assistance greatly appreciated!!

alexjolley
alexjolley
0
3
825
Haz
Haz
Moderator
Solution

Hello @alexjolley,

I am assuming showModal is a Livewire method here. I am also assuming you have a Player model.

You can pass it directly to the showModal method. Remember to accept it in the method too.

window.livewire.emitTo('components.player-modal', 'showModal', '{{ $player->id }}')

public function showModal(Player $player)
{
    dd($player);
}
0
Reply
alexjolley
alexjolley

Thank you, that's exactly what I needed.

0
Reply to thread
Haz
Haz
Moderator

@alexjolley You are welcome! Don't forget to mark the best answer so people know it is solved. :)

0
Reply to thread