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

Dom差分の問題

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

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

現象:

対処法:

<ul>
    @foreach ($items as $item)
        <li wire:key="{{ $loop->index }}">{{ $item }}</li>
    @endforeach
</ul>
<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" :key="$loop->index">
    @endforeach
</ul>
<input type="text" wire:model="name">
<div> @error('name'){{ $message }}@enderror </div>
<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へ設定してください。

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

言語
バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる