라이브와이어 확인

Livewire를 사용하여 확인 대화 상자를 만들어 봅시다.

확인 대화 상자가 표시되고 사용자가 확인 버튼을 클릭한 후 필요한 작업을 수행합니다.

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Confirm extends Component
{
    public $displayingModal = false;

    protected $listeners = [
        'displayConfirmation' => 'display',
    ];

    public $state = [
        'title' => '',
        'message' => '',
        'return' => [
            'component' => '',
            'args' => [],
        ],
    ];

    public function display($title, $message, $component, ...$args)
    {
        $this->state['title'] = $title;
        $this->state['message'] = $message;
        $this->state['return'] = [
            'component' => $component,
            'args' => $args,
        ];

        $this->displayingModal = true;
    }

    public function confirm()
    {
        $this->emitTo(
            $this->state['return']['component'],
            ...$this->state['return']['args']
        );

        $this->displayingModal = false;
    }

    public function cancel()
    {
        $this->state = [
            'title' => '',
            'message' => '',
            'return' => [
                'component' => '',
                'args' => [],
            ],
        ];
        $this->displayingModal = false;
    }

    public function render()
    {
        return view('livewire.confirm');
    }
}

블레이드 파일:

<div>
    <x-jet-dialog-modal wire:model="displayingModal">
        <x-slot name="title">
            {{ $state['title'] }}
        </x-slot>

        <x-slot name="content">
            <p>
                {{ $state['message'] }}
            </p>
        </x-slot>

        <x-slot name="footer">
            <x-jet-secondary-button wire:click="cancel" wire:loading.attr="disabled">
                {{ __('No') }}
            </x-jet-secondary-button>

            <x-jet-button class="ml-3" wire:click="confirm" wire:loading.attr="disabled">
                {{ __('Yes') }}
            </x-jet-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>

사용법은 다음과 같습니다.

$this->emitTo('confirm', 'displayConfirmation', 'Delete Record', 'Are you sure?', 'livewire-component-name', 'destroyRecord', '11234');

또는

<div class="cursor-pointer"
    wire:click="$emitTo('confirm', 'displayConfirmation', 'Delete Record', 'Are you sure?', 'livewire-component-name', 'destroyRecord', '11234')">
    <x-icon name="o-trash" class="text-indigo hover:text-red-500 mr-3 flex-shrink-0 h-6 w-6">
    </x-icon>
</div>

emitTo는 기본적으로 지정된 Livewire 구성 요소의 이름을 트리거하고, 메서드를 호출하고, 메서드에 필요한 모든 인수를 전달합니다.
livewire-component-name는 추가 작업을 위해 정의된 모든 메서드를 처리할 책임이 있습니다. destroyRecord는 ilivewire-component-name를 호출하는 메서드이고, destroyRecord에서 livewire-component-name에서 받을 것으로 예상되는 '1234' 인수입니다.