Livewire 2.x トラブルシューティング

Dom差分の問題

Livewireユーザーが遭遇する最も一般的なトラブルは、LivewireのDOM差分/パッチ適用システムに関係しています。これは、コンポーネントが更新されるたびに、変更、追加、または削除された要素を選択的に更新するシステムです。

ほとんどの場合、このシステムは信頼できますが、Livewireが変更を適切に追跡できない場合があります。これが発生すると、うまくいけば、役立つエラーが投げられ、以降のガイドに沿いデバッグできます。

現象:

• input要素がフォーカスを失う
• 要素または要素のグループが突然消える
• 以前はインタラクティブだった要素がユーザー入力への応答を停止する
• ローディングインジケーターが誤って起動する
• ユーザーアクションが機能しなくなる

対処法:

• コンポーネントが単一レベルのルート要素を持つようにします。
• ループ内の要素にwire:keyを追加します。

<ul>
    @foreach ($items as $item)
        <li wire:key="{{ $loop->index }}">{{ $item }}</li>
    @endforeach
</ul>

• ループ内のネストしているコンポーネントにkey()を追加します。

<ul>
    @foreach ($items as $item)
        @livewire('view-item', ['item' => $item], key($loop->index))

        <!-- key() using Laravel 7's tag syntax -->
        <livewire:view-item :item="$item" :wire:key="$loop->index">
    @endforeach
</ul>

• 要素内のBlade条件（@if、 @error、@auth）をラップします。

<input type="text" wire:model="name">
<div> @error('name'){{ $message }}@enderror </div>

• wire:keyを追加します。最後の手段としてwire:keyを追加すると、LivewireにDOM要素を追跡する方法が直接指定されます。この属性を使いすぎると臭いがしますが、この種の問題には非常に便利で強力です。

<div wire:key="foo">...</div>
<div wire:key="bar">...</div>

チェックサム問題

リクエストごとに、Livewireは「チェックサム」を実行しますが、配列を使用している場合は配列内のデータが同じ場合、例外が投げられます。

PHPでは、配列に英数字と数字のキーを同じ配列で任意の順序で含めることができますが、JavaScriptは英数字のキーを持つ配列をサポートしていないため、そのオブジェクトを作成します。JavaScriptがオブジェクトを作成しているときは、キーも並べ替えられ、英数字キーの前に数字キーが配置されます。

これにより、JSONが返送されるときに問題が発生します。これは、「チェックサム」が異なるためです。

一部のタイプ（Point、LineString、Polygon、Multi-variations）も、このチェックサムに失敗します。

したがって、配列のパブリックプロパティがある場合は、数字キーが英数字キーの前にあることを確認してください。

class HelloWorld extends Component
{
    public $list = [
        '123' => 456,
        'foo' => 'bar'
    ];
    ...

クエリ文字列の問題

Livewireは、クエリ文字列を設定するときにサイトのreferrer情報を使用しています。これにより、 referrer-policyを介してアプリケーションにセキュリティヘッダーを追加するときに競合が発生する可能性があります。

現象:

• クエリ文字列がまったく更新されない
• 値が空の場合、クエリ文字列が更新されない

対処法:

セキュリティヘッダーを設定する場合は、確実にreferrer-policy値をsame-originへ設定してください。