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>