はじめに
LivewireでDOMが更新されてから特定のJSの処理を実行させたい場合、一例としてdispatch使った方法をご紹介します。
また、最新のLivewireバージョン3の情報がまだ少なかったため、残しておこうと思います。
環境
- Laravel 10
- PHP 8.1
- Livewire 3
バージョン2からの変更点
chatGPTにdispatchの使い方を聞いても、「dispatchBrowserEvent」という、Livewireバージョン2のメソッドが出てきてしまいます。
$this->dispatchBrowserEvent('name-updated', ['newName' => $value]);
最新のバージョン3では「dispatch」となります。
$this->dispatch('post-created', title: $post->title);
上記のように第二引数にデータをセットすることで、イベントと合わせて渡すことが可能です。
DOM読み込みにフックする
rendered()というメソッドを使えば、DOMが読み込まれた後に発火する処理を書くことができます。
public function rendered($view, $html)
{
// DOM読み込み後の処理を記述
}
Livewireコンポーネントがレンダリングされる前にDOM操作が実行されてしまうとエラーになりため、こうしたメソッドを適切に使う必要があります。
Livewire3からは、コンポーネント作成時にデフォルトで書かれているrender()メソッドは必要なくなりました。
※viewをreturnする以外の処理を書く場合には必要です。
JavaScriptとLivewireの通信
@scriptというディレクティブを使用し、$wire.on(イベント名)とすることでリッスンすることができます。
@script
<script>
$wire.on('post-created', () => {
console.log('hogehoge');
});
</script>
@endscript
先ほどdispatchで渡したデータを受け取って利用することもできます。
オブジェクトとしてタイトルが入っているため、ドット記法で取り出すことができます。
@script
<script>
$wire.on('post-created', (title) => {
console.log('投稿タイトル：' + title.title);
});
</script>
@endscript
組み合わせて使う
これまで紹介した「dispatch」「rendered」「wire.on」を使用して、DOM更新後のJavaScript実行が実現できます。
といっても説明した流れのとおりに書くだけです。
public function rendered()
{
$this->dispatch('page-loaded', title: $this->title);
}
@script
<script>
$wire.on('post-created', (title) => {
const target = document.querySelector('.page-title');
target.innerHTML = title.title;
});
</script>
@endscript
おわりに
Livewire3については情報がまだ少なく、ググってもなかなか出てこないため公式が一番役に立ちました。
便利なライブラリであることは間違いないので、使い倒してわかったことを随時投稿しようと思います。