Laravel 8 で LiveWire を使用する

● Laravel 8 の Livewire とは

Laravel8では
・inertia.js を選択すればvue.jsで作成されたスキャフォールディングを使用する。
・Livewire を選択すれば　PHP + Blade + ajax　で作成されたスキャフォールディングを使用する。
・Laravel Breeze をインストールすればPHP + Bladeのみで作成されたスキャフォールディングを使用する。

● livewireのインストール

1. パッケージのインストール

composer require livewire/livewire

2. assets と config の出力

php artisan livewire:publish

● blade.php で LiveWire を読み込む

以下のタグで livewire を読み込みます

    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

● laravel-livewire-tables をインストールして使用する

1. パッケージのインストール

composer require rappasoft/laravel-livewire-tables

2. make:livewire コマンドから bladeとClassを作る

php artisan make:livewire posts-table

2. Post モデルの一覧表示の livewire クラスを作成する

touch app/Http/Livewire/PostsTable.php

以下の内容で作成します

welcome.blade.php

@extends('layout')

@section('content')

    @yield('content__header')
    @yield('content__search')

    <div class="row">
        <div class="col-md-12">
            @livewire('posts-table')
        </div>
    </div>
@endsection

resources/views/livewire/posts-table.blade.php

<div>
    <div class="row">
        <div class="col">
            <input wire:model="search" class="form-control" type="text" placeholder="Search books...">
        </div>
    </div>

    <div class="row">
        <table class="table table-hover table-condensed table-striped table-bordered table_sm">
            <thead>
            <tr>
                <th class="sortable">ID</th>
                <th class="sortable">
                    <a wire:click.prevent="sortBy('title')" role="button" href="#">
                        Title
                    </a>
                </th>
                <th class="sortable">
                    <a wire:click.prevent="sortBy('author_id')" role="button" href="#">
                    Author
                    </a>
                </th>
            </tr>
            </thead>
            <tbody>
            @foreach ($posts as $post)
                <tr>
                    <td>{{ $post->id }}</td>
                    <td>{{ $post->name }}</td>
                    <td>{{ $post->content_name }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>

app/Http/Livewire/PostsTable.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class PostsTable extends Component
{

    use \Livewire\WithPagination;

    public $perPage = 10;
    public $search = '';
    public $sortField = 'id';
    public $sortAsc = true;

    public function render()
    {
        $posts = \App\Post::search($this->search)
            ->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
            ->paginate($this->perPage);
        return view('livewire.posts-table', ['posts' => $posts]);
    }
}

● 既存の livewire コンポーネントをインストールして使用する

https://github.com/imliam/awesome-livewire

● livewire と vue.js の違い

livewire では vue.js や react と異なり、ajaxでhtmlコードを返します。
検索はサーバーサイド( DBによる再select )を使用します。

No.2021

09/03 11:11

edit