Livewire 이벤트 수신시 매개변수($payload) 전달방법에 대해서

livewire 3 컴포넌트에서 다음과 같은 이벤트 리스너가 있다고 가정하자.

    #[On('admin-users:user-form:open')]
    public function open(array $payload = []): void
    {
        $this->mode = $payload['mode'] ?? 'create';
		$userId = $payload['id'] ?? null;
        ...
    }

 

$payload 는 배열로 값이 넘어 오는데

 

livewire 함수에 전달하는 방법과 blade 코드에서 전달하는 방법에 차이가 있다..

 

livewire 함수에서는

    public function openUserEditModal(string $userId): void
    {
        $this->dispatch('admin-users:user-form:open', [
            'mode' => 'edit',
            'id' => $userId,
        ]);
    }

 

blade 페이지 에서는 payload 를 써줘야 한다.

<div class="text-xs cursor-pointer hover:text-blue-600 mr-2"
wire:click="$dispatch('admin-users:user-form:open', 
{ payload: 
	{ mode: 'edit', id: {{ $user->id }} } 
})">
수정
</div>

 

추천방법은

 

blade 페이지에서 서버 함수를 직접 호출하는 방법이다.

<div class="text-xs cursor-pointer hover:text-blue-600 mr-2"
wire:click="openUserEditModal({{ $user->id }})">
수정
</div>

 

왜냐하면 서버에 갔다가 와야 하기 때문에 서버 함수를 사용해서 값을 전달하는게 더 안전하다.