Livewire — реактивные и динамические интерфейсы на Laravel

Опубликовано автором

документация: https://laravel-livewire.com/docs/2.x/quickstart

установка

composer require livewire/livewire

или

php -d memory_limit=-1 $(which composer) require livewire/livewire

подгрузка js и css в blade шаблонах

...

    @livewireStyles

</head>

<body>

    ...

 

    @livewireScripts

</body>

</html>

создание компонета Livewire

php artisan make:livewire ListComponent

после выполнения данной команды будут созданы: app/Http/Livewire/ListComponent.php и resources/views/livewire/list-component.blade.php

 

Пример вывода списка в виде таблицы

создать компонент:

php artisan make:livewire TableListComponent

открыть файл resources/views/livewire/table-list-component.blade.php и заполнить (таблица с запросом на сортировку по одному из столбиков):

<div>

    <div class="row">
        <div class="col-12">
            <table class="table">
                <thead>
                <tr>
                    <th>
                        <label>
                            <input type="radio" name="sort" wire:model="sort" value="col1" />
                            Столбец 1
                        </label>
                    </th>
                    <th>
                        <label>
                            <input type="radio" name="sort" wire:model="sort" value="col2" />
                            Столбец 2
                        </label>
                    </th>
                    <th>
                        <label>
                            <input type="radio" name="sort" wire:model="sort" value="col3" />
                            Столбец 3
                        </label>
                    </th>
                </tr>
                </thead>
                <tbody>
                @if (count($list))
                    @foreach($list as $row)
                        <tr>
                            <td>{{$row->col1}}</td>
                            <td>{{$row->col2}}</td>
                            <td>{{$row->col3}}</td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="3">Список пуст</td>
                    </tr>
                @endif
                </tbody>
            </table>
        </div>
    </div>

</div>

открыть файл app/Http/Livewire/TableListComponent.php и заполнить:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Table;

class TableListComponent extends Component
{
    public $sort = 'col1', $list;

    public function render()
    {
        $this->list = Table::orderBy($this->sort, 'asc')->get();

        return view('livewire.table-list-component');
    }
}

создать обертку (для использования команды нужен пакет theanik/laravel-more-command):

php artisan make:view wrapper

открыть файл resources/views/wrapper.blade.php и заполнить:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" href="/assets/images/favicon.png" type="image/png" sizes="32x32 64x64"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>

    <title>{{ env('APP_NAME') }}</title>

    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700,800,800italic&subset=latin,cyrillic,latin-ext,cyrillic-ext,vietnamese,greek-ext,greek' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

    <!-- Styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    @livewireStyles

    <link href="/css/app.css" rel="stylesheet">

</head>
<body>

<div class="wrapper">
    @yield('content')
</div>

<!-- JavaScripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

@livewireScripts

</body>
</html>

создать шаблон для страницы на которую выводить таблицу:

php artisan make:view pageList

открыть шаблон resources/views/pageList.blade.php и заполнить:

@extends('wrapper')

@section('content')
    @livewire('table-list-component')
@endsection

открыть routes/web.php и добавить route:

<?php

// ...

Route::view('list', 'pageList')
        ->name('pageList');