こんにちはコバヤシです。
今回は以前書いた記事「Laravel8でLivewireを試してみる」の実践編を書いていきます。
（Laravel9がリリースされましたが、8で進めます。。）
前回は、コンポーネントとviewで値を連動して表示するまでをやりました。 実践編ではフォームの入力値との連携をやっていきます。
Inputの値と連携する
Inputの値を連携するにはwire:modelを使います。
/app/Http/Livewire/Sample.php
<?php public $sample;
/resources/views/livewire/sample.blade.php
<input type="text" wire:model="sample"> <p>{{ $sample }}</p>
wire:modelでコンポーネントのプロパティと連携され、それがすぐにviewに表示されます。
vue.jsのv-modelと同じ様な感じですね。
wire:model.debounce
通常、リクエストが多くなるのを防ぐために150msのデバウンス（待ち時間）で処理されます。
このデバウンスを変更するにはwire:model.debounceを使用します。
<input type="text" wire:model.debounce.300ms="sample"> <p>{{ $sample }}</p>
wire:model.lazy
通常のchangeイベントでリクエストが送られるようにするには、wire:model.lazyを使います。
（入力からフォーカスを外した時）
<input type="text" wire:model.lazy="sample"> <p>{{ $sample }}</p>
wire:model.defer
入力がある度にリクエストを送信せず、次のリクエストまで送信を処理待って値の更新を行うには
wire:model.deferを使います。以下では、更新ボタンを押すまでは値の更新が行われません。
<?php public $sample; public function update() { // 何らかの処理 }
<input type="text" wire:model.lazy="sample"> <p>{{ $sample }}</p> <button type="button" wire:click="update" >更新</button>
バリデーション
バリデーションを行うには、ruleの設定とvalidateメソッドを使います。
<?php public $sample; protected $rules = [ 'sample' => 'required|max:10000', ]; protected $messages = [ 'sample.required' => '入力してください', 'sample.max' => '100文字以下で入力してください', ]; protected $validationAttributes = [ 'sample' => 'サンプル' ]; public function update() { // バリデーション $this->validate(); // 何らかの処理 }
エラーの表示は通常のbladeと同じ様に@errorを使います。
<input type="text" wire:model.lazy="sample"> <p>{{ $sample }}</p> @error('sample') <p class="error">{{ $message }}</p> @enderror <button type="button" wire:click="update" >更新</button>
コンポーネント内でエラーを取得するには、以下のようにします。
<?php public function update() { // エラーがあったら if($this->getErrorBag()->any()) { $error = $this->getErrorBag()->first('sample'); } }
まとめ
入力値の連携とバリデーションについて書いてきました。
vue.jsなどをやっていれば理解がしやすいのではないでしょうか。
次回はライフサイクルについて書いていきたいと思います。
