前回[Laravel11+LIVEWIRE #3]プロパティー（Properties）でプロパティーの使い方を学んだ。
今回はアクション（Actions）をやっていく。
参考）https://livewire.laravel.com/docs/actions
今までもそうだが、これからもAlpineJSについては組み入れない。
アクションとは
Livewire アクションは、ボタンのクリックやフォームの送信などのフロントエンド インタラクションによってトリガーできるコンポーネント上のメソッドです。これらは、ブラウザーから直接 PHP メソッドを呼び出すことができるという開発者エクスペリエンスを提供し、アプリケーションのフロントエンドとバックエンドを接続する定型コードの作成に行き詰まることなく、アプリケーションのロジックに集中できるようにします。
コンポーネントのリフレッシュ
公式によると、以下のタグでコンポーネントをリフレッシュしてくれるらしいので、やってみる。
<button type="button" wire:click="$refresh">...</button>resources/views/livewire/post/index.blade.php
# 以下のタグを適当に置く。
<button type="button" wire:click="$refresh">一覧リフレッシュ</button>ブラウザで表示するとこんな感じで表示される。
一覧リフレッシュを押すと…
一覧がきえるんかい！今の段階ではよくわからんので飛ばす！
登録コンポーネントにも設置してみたがよくわからん！
アクションの確認（Confirming an action）
削除確認のメッセージを表示したいときのやつだろう。
resources/views/livewire/post/item.blade.php
<div wire:key="{{ $post->id }}">
{{ $post->title }} {{ $post->message }}
# ここから
<button
type="button"
wire:click="delete"
wire:confirm="Are you sure you want to delete this post?"
>
Delete post
</button>
# ここまで追加
</div>ブラウザで表示して、「Delete post」ボタンをクリックするとこんな感じで表示される。
今どき、confirmなんか使わないけど、できるよってお話。削除メソッド作ってないから、作っておこう。
コンポーネント作成
% php artisan make:livewire Post\\Deleteapp/Livewire/Post/Delete.php
<?php
namespace App\\Livewire\\Post;
use Livewire\\Component;
class Delete extends Component
{
public $post;
public function delete()
{
$this->post->delete();
return redirect()->to('/posts')
->with('status', 'Post deleted!');
}
public function render()
{
return view('livewire.post.delete');
}
}resources/views/livewire/post/delete.blade.php
<span wire:key="{{ $post->id }}">
<button
type="button"
wire:click="delete"
wire:confirm="Are you sure you want to delete this post?"
>
Delete post
</button>
</span>resources/views/livewire/post/item.blade.php
<div wire:key="{{ $post->id }}">
{{ $post->title }} {{ $post->message }}
@livewire(Post\\Delete::class, ['post' => $post], key($post->id))
</div>これでブラウザで表示して「Delete post」をクリックすると、削除が行えるようになる。
（残すは更新処理だな…）
イベントリスナー（Event listeners）
公式を見る限り、クリック・サブミット・キーダウン・キーアップ・マウスエンター？とかイベントが拾えるよってこと。他にもシフトやらエンターやらも拾えるよって書いてある。
とりあえず省略する。
フォーム送信中に入力を無効にする（Disabling inputs while a form is being submitted）
submit ボタン連打とかでデータおかしくなるのはよくある話だし、これは重要だよね！
resources/views/livewire/post/create.blade.php
：
<button type="submit">Save</button>
<span wire:loading>Saving...</span> ←この行追加
：普通にやると一瞬で終わるので、サーバ側で待機させる。
app/Livewire/Post/Create.php
：
public function store()
{
sleep(10); ←この行を追加してとりあえずサーバ側で10秒待機
$post = new Post();
：ブラウザで登録を行うと、こんな感じで表示されタイトル・メッセージ・Saveはさわれなくなる。
パラメータの受け渡し（Passing parameters）
上記の削除処理はPost自体を渡しているが、idを渡すだけのほうがメモリや通信量が節約できる。
app/Livewire/Post/Delete.php
<?php
namespace App\\Livewire\\Post;
use App\\Models\\Post;
use Livewire\\Component;
class Delete extends Component
{
//public $post;
public $id;
public function delete($id)
{
//$this->post->delete();
$post = Post::findOrFail($id);
//$this->authorize('delete', $post); ← 認証されていなければエラーとなる
$post->delete();
return redirect()->to('/posts')
->with('status', 'Post deleted!');
}
public function render()
{
return view('livewire.post.delete');
}
}resources/views/livewire/post/delete.blade.php
<span>
<button
type="button"
wire:click="delete({{ $id }})"
wire:confirm="Are you sure you want to delete this post?"
>
Delete post
</button>
</span>resources/views/livewire/post/item.blade.php
{{--@livewire(Post\\Delete::class, ['post' => $post], key($post->id))--}}
@livewire(Post\\Delete::class, ['id' => $post->id])動作は変わらないが少し軽量化したと思う。
依存関係の注入（Dependency injection）
よくわからん。省略
Livewire の「ハイブリッド」JavaScript 関数（Livewire’s “hybrid” JavaScript functions）
よくわからん。省略
1 回限りの JavaScript 式の評価（Evaluating one-off JavaScript expressions）
app/Livewire/Post/Create.php
storeメソッドに以下を追加
$this->js("alert('Post saved!')");ブラウザで保存を行うとアラートが表示される。あんまり使う機会はないような？
以降の記事は現段階ではあまり有用ではなさそうなので、一旦省略する。
感想
何かをやると一覧が消えるとかまだ知識が足りていない・紐づいていないからまぁ中途半端な記事が続く…
LIVEWIREの記事ってどこに書くかわからなすぎて困る…突然コンポーネント増えたりしてるからなかなかね…
コメント