Livewire 2.x コンポーネントのネスト

Livewireはコンポーネントのネストをサポートしています。コンポーネントのネストは非常に強力な手法ですが、事前に確認しておく価値のあるいくつかの落とし穴があります。

これはadd-user-noteと名付けた、他のLivewireコンポーネントのビューから呼び出されるネストしたコンポーネントの例です。

class UserDashboard extends Component
{
    public User $user;
}
<div>
    <h2>User Details:</h2>
    Name: {{ $user->name }}
    Email: {{ $user->email }}

    <h2>User Notes:</h2>
    <div>
        @livewire('add-user-note', ['user' => $user])
    </div>
</div>

ループ内のコンポーネントを追跡する

VueJsと同様に、ループ内でコンポーネントをレンダーリングする場合、Livewireにはどれがどれであるかを追跡する方法がありません。これを改善するために、livewireは特別な"key"構文を提供しています。

<div>
    @foreach ($users as $user)
        @livewire('user-profile', ['user' => $user], key($user->id))
    @endforeach
</div>

Laravel 7以降を使用している場合は、タグ構文を使用できます。

<div>
    @foreach ($users as $user)
        <livewire:user-profile :user="$user" :key="$user->id">
    @endforeach
</div>

ループ内の兄弟コンポーネント

状況により、ループ内へ兄弟コンポーネントを含める必要が起きるでしょう。こうした状況では、key値をさらに考慮する必要があります。

各コンポーネントには独自のkeyが必要ですが前記の方法を使用すると、両方の兄弟コンポーネントが同じキーを持つことになり、予期しない問題が発生します。これに対処するため、以下のようにコンポーネント名をプレフィックスにすることにより、各keyを確実に一意にできます。

<!-- user-profile component -->
<div>
    // 間違い
    <livewire:user-profile-one :user="$user" :key="$user->id">
    <livewire:user-profile-two :user="$user" :key="$user->id">

    // 正解
    <livewire:user-profile-one :user="$user" :key="'user-profile-one-'.$user->id">
    <livewire:user-profile-two :user="$user" :key="'user-profile-two-'.$user->id">
</div>

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュを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)へ移動

その他

?

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