Laravel Livewireを使用したBootstrapモーダルの実装方法

方法1: Livewireコンポーネント内でモーダルを表示する

まず、LaravelプロジェクトでLivewireをセットアップします。Livewireのインストール方法については、公式ドキュメントを参照してください。

Livewireコンポーネントを作成し、モーダルの表示と非表示を管理するためのプロパティを追加します。例えば、以下のようなコードです。

namespace App\Http\Livewire;
use Livewire\Component;
class MyComponent extends Component
{
    public $showModal = false;
    public function openModal()
    {
        $this->showModal = true;
    }
    public function closeModal()
    {
        $this->showModal = false;
    }
    public function render()
    {
        return view('livewire.my-component');
    }
}

Livewireコンポーネントのビューで、ボタンをクリックしてモーダルを開くためのメソッドを呼び出します。

<button wire:click="openModal">モーダルを開く</button>
@if($showModal)
    <div class="modal">
        <!-- モーダルのコンテンツをここに追加 -->
        <button wire:click="closeModal">モーダルを閉じる</button>
    </div>
@endif

方法2: BootstrapモーダルをLivewireコンポーネント内で使用する

Livewireコンポーネント内でBootstrapのモーダルを使用する場合は、Livewireのwire:ignoreディレクティブを使用して、Livewireがモーダル内のHTMLを更新しないようにします。

Livewireコンポーネント内のコード例:

namespace App\Http\Livewire;
use Livewire\Component;
class MyComponent extends Component
{
    public $showModal = false;
    public function openModal()
    {
        $this->showModal = true;
    }
    public function closeModal()
    {
        $this->showModal = false;
    }
    public function render()
    {
        return view('livewire.my-component');
    }
}

Livewireコンポーネントのビューで、Bootstrapのモーダルを使用します。

<button wire:click="openModal">モーダルを開く</button>
<div class="modal" tabindex="-1" role="dialog" wire:ignore>
    <!-- モーダルのコンテンツをここに追加 -->
    <button wire:click="closeModal">モーダルを閉じる</button>
</div>
@if($showModal)
    <script>
        // モーダルを表示するためのJavaScriptコードを追加
        // 例: $('#myModal').modal('show');
    </script>
@endif