Livewireで開発中、wire:clickを設定したボタンが全く反応しない。
開発者ツールを見ても、普通だったらEVENTが付くはずが付かない。
(Firefoxの開発者ツールだと、「livewire:ほにゃらあ」を設定すると、JSのEVENTが設定される）
開発者ツールのコンソールを除くと
Livewire: Multiple root elements detected. This is not supported.
See docs for more information
https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues
と出ていた。
複数のroot要素？
それはサポートされていません？
なんとなくこれ系のエラーはlivewireに担当させるblade側のHTMLのしでかしだな・・と
(livewireに担当させるblade = render()内のreturn view()で指定したblade)
思ったので、HTMLタグをキレイにタブでインデントしていったら
粗く解説すると、以下の通りに
<div>
<div>
<div>
aaaa
<input type="text" wire:model="data1">
</div>
<div>
</div>
<button wire:click="abc()">Add</button>
</div>
という感じでルートDIVから外れていた・・
ちなみにLivewireのBladeでは必ずコンテンツすべてを<div></div>で囲まないといけなくて
囲った範囲がLivewireで動的に扱える範囲って認識をする。
ので、そこから外れると、
「おい兄弟、その書き方だと俺達の範囲から外れるから動かないぜ」
というわけなんだな
たしかに確かに・・
なんかwire:clickとかが反応しなかったらbladeHTMLをキレイにしてみましょう。