この記事の概要
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の動作がおかしいと思ったら、コンポーネントに渡しているパラメーターを確認し直すと解決するかもしれません。
是非、お気軽にコメントなどしてください。