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>