Livewire:Javascriptでinput要素の値を設定してもNULLが渡されてしまう対策

概要

Javascriptでinput要素に値を設定する画面で、バリデーションエラー（必須項目なのに値未設定）が出るので調べてみました。(Livewire3.0使用)

対応策

値を設定した後でinputイベントをdispatchする必要がありそう。

経緯

・画面
<input id="name" type="text">

・Javascript
document.getElementById('name').value = 'abc' console.log(document.getElementById('name').value);

・バリデーションルール
'name' => 'required'

・サーバー側での確認
logger()->debug('$this:' . json_encode($this));

といった設定で、console.logで値が設定されているけど、サーバー側に渡された要素を確認すると、name項目はNULLだった。

・調査
Javascriptで値設定せずに、画面上でname項目に値を手入力してsubmitするとバリデーションエラーは出ない。

・対応策
document.getElementById('name').value = 'abc' document.getElementById('name').dispatchEvent(new Event('input'));`

これで、Javascriptで設定した値がサーバーに渡されました。