More Related Content
Similar to Laravel Livewire の紹介 (20)
Laravel Livewire の紹介
- 5. LiveWireとは
• CALEB PORZIOが作った Laravel用パッケージ
• https://github.com/calebporzio/laracasts-livewire-datatable
• https://laravel-livewire.com/
• 動的なテーブル表示を簡単につくれる
- 9. bladeに仕込む
• 表示させたい blade ファイルに
@livewireAssets
を入れる。
こんな感じ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projects</title>
@livewireAssets
</head>
- 10. artisan make:livewire
• php artisan make:livewire foowire
• ２つのファイルが作られる
• CLASS: app/Http/Livewire/Foowire.php
• VIEW: resources/views/livewire/foowire.blade.php
- 11. CLASS Foowire.phpに処理を
書く
<?php
namespace AppHttpLivewire;
use LivewireComponent;
class Foowire extends Component
{
public $perPage = 10;
// public $search = '';// input wire:model="search" と同期する
public $search = '';
public function clear() {
$this->search = '';
}
public function render()
{
$contacts = AppContact::search($this->search)->paginate($this->perPage);
return view('livewire.foowire', ['contacts' => $contacts]);
}
}
検索して paginate を呼び
結果を blade の view に
渡す
- 12. Model Contacts.php
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Contact extends Model
{
protected $guarded = [];
protected $casts = ['birthdate' => 'date'];
public static function search($query)
{
return empty($query) ? static::query()
: static::where('name', 'like', '%'.$query.'%')
->orWhere('email', 'like', '%'.$query.'%');
}
}
- 13. foowire.blade.php 一覧表示部
分のbladeを書く<div>
<div class="row mb-4">
<div class="col form-inline">
Per Page:
<select wire:model="perPage" class="form-control">
<option>10</option>
<option>25</option>
</select>
</div>
<div class="col">
<input wire:model="search" class="form-control" type="text" placeholder="Search Contacts...">
</div>
</div>
<div class="row">
<table class="table">
<tbody>
@foreach ($contacts as $contact)
<tr>
<td>{{ $contact->name }}</td>
<td>{{ $contact->email }}</td>
<td>{{ $contact->birthdate->format('m-d-Y') }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="row">
<div class="col">
{{ $contacts->links() }}
</div>
<div class="col text-right text-muted">
Showing {{ $contacts->firstItem() }} to {{ $contacts->lastItem() }} out of {{ $contacts->total() }} results
</div>
</div>
</div>
Laravelの
Paginateの処理と
自動連携する。
すごい！
wire:model='perPage'で
Foowire.php の $perPageと
同期する。すごい！
