はじめに
livewireでDOMの更新がされた時、blade内に書いたjavascriptは実行されないので
動的に生成した要素は消えてしまいます。
jsライブラリとかをlivewireに組み込もうとすると必ず起きる問題なのでメモがてら対処法
対処法
イベントをblade内に記述して
render内でブラウザイベントを発火させる。
app/Http/Livewire/Sample0303.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Sample0303 extends Component
{
public $sample;
public function render()
{
++ $this->dispatchBrowserEvent('inputTest');
return view('livewire.sample0303')
->extends('adminlte::page')
->section('content');
}
}
resources/views/livewire/sample0303.blade.php
<div class="pt-2">
<div class="card">
<div class="card-body">
<input type="text" wire:model="sample"/>
<h1 id="test"></h1>
<script>
//livewireロード完了時に実行される（要するにページアクセス時のみ）
document.addEventListener('livewire:load', function () {
inputText();
})
//イベント発火時に実行
window.addEventListener('inputTest', function () {
inputText();
});
function inputText() {
const container = document.getElementById('test');
container.innerHTML = '追加テキスト';
}
</script>
</div>
</div>
</div>
render内にイベント発火処理を書いているから読み込み時の処理は書かなくて良いじゃないかと疑念を抱くと思いますが、
動きません。
viewが描画されないとそもそもDOM操作出来ないと思うので仕方ないかなぁと。
1回読み込んだ後は更新時に差分を見てDOMを差し替えてるっぽいので動くのかなと(推測)
render後に実行されればベストなんですが今の所良いやり方が見つかっていないので、もしあれば教えて頂きたいです。