この記事の概要

livewireの動作がおかしいと思った際の解決ログです。

想定読者

livewireを使用している
livewireが上手く動作してくれない部分がある

得られること

livewireのエラーが治るかも
正しいlivewireコンポーネントの呼び出し方

livewireコンポーネントの呼び方

公式ドキュメントに記載されている通り、以下のような呼び出し方をします。

<livewire:show-posts />

または、

@livewire('show-posts')

livewireコンポーネントにパラメータを渡す場合は次のようになります。

<livewire:show-post :post="$post">

または,

@livewire('show-post', ['post' => $post])

パラメータを渡す場合には、制約があるので、注意が必要です。これを守れていないとlivewireが正しく挙動しなくなります。

パラメータの制約

パラメータの制約は公式ドキュメントに記載されています。
livewireは動的に動かすために、Ajaxを使用しており、Ajaxが対応していないパラメータを渡すとerrorになります。

使用可能なパラメータの型

以下の型のみパラメータとして、渡すことができます。

array
string
integer
boolean
null

使用できないパラメータの型

反対に使用できない型は、collection型などがあげられます。
データベースからeloquentなどを用いて、collection型のパラメータを使用している際は、livewireコンポーネント間をidなどでやり取りをし、レンダリング先のコンポーネントで、再度collection型を取得する流れになります。
collection型が動作しないことは確認済みです。datetime型なども動作しないかもしれません。

最後に

livewireのコンポーネントに使用できないパラメータを渡していても、Ajaxの層でのエラーなので、phpの画面にはエラー表示されません。
livewireの動作がおかしいと思ったら、コンポーネントに渡しているパラメーターを確認し直すと解決するかもしれません。

是非、お気軽にコメントなどしてください。