You can include one component into another component in Livewire. Let's imagine we have one component for listing comments, inside it, we have a component to show a comment. So each comment is a Livewire component. There is one crucial aspect to know when adding a nested component.
So we have a Livewire component, CommentsList, where we get the comments, order them and do other needed tasks. Then in the Blade, we show them like so:
resources/views/livewire/comments-list.blade.php:
<div> @foreach ($comments as $comment) <livewire:comment-show :$comment wire:key="{{ $comment->id }}" /> @endforeach</div>Nothing particular here in the Blade file. The only thing Livewire says to add a wire:key when looping data in @foreach. In the CommentsList component, we call another Livewire component, CommentShow, and pass the comment.
In the CommentShow, we assign everything to public properties and show the comment.
resources/views/livewire/comment-show.blade.php:
<div class="mb-4 mt-4 ml-{{ $level*4 ?? '0' }}"> [ {{ $comment->rating }} ] <span class="font-semibold">{{ $user->name }} [{{ $comment->created_at->format('Y-m-d H:i') }}]:</span> {{ $comment->comment_text }} @auth <a wire:click="vote(1)" href="#" class="underline">+1</a> <a wire:click="vote(-1)" href="#" class="underline">-1</a> @endauth @foreach ($comment->comments->sortByDesc('rating') as $comment) < @endforeach</div>Again, the most important aspect here is to add :key when rendering a child component.
Adding keys is necessary to avoid getting into issues that will be very hard to diagnose.
Course Conclusion
And that's it for this course. Now you can go and practice more with Livewire!
The code for this course is available in this GitHub repository.
would it be possible to show the render functions for both the commentsshow and commentslist?
But it is shown
As a beginner, I encountered some challenges while taking this course. I had hoped to gain proficiency in Livewire after making several attempts to learn it properly in the past. While I understand that this course is intended for advanced users, the term 'Scratch' suggested to me that it would cover the topic comprehensively, from the ground up.
I noticed that the course seemed to overlook the concept of routing, which left me somewhat confused. Additionally, I encountered an issue where my initial Livewire components did not load correctly. I acknowledge that it can be challenging to convey all the details in a text-based course, but including a few lines of code or clearer instructions for beginners to get started smoothly would have been greatly appreciated.
Furthermore, the source code provided at the end of the course appeared somewhat perplexing to me. It would have been beneficial if there were more explanatory comments or annotations to enhance understanding.
Thanks for the comment, sad to read your impression. We received a few similar comments and already filled in the course content with mentions of routing and links to specific docs about Breeze or something that was related.
I personally react to most of the comments if there's something unclear in the lesson or can be improved.
Indeed, I agree, at times, we assumed too much knowledge from students without explaining it deeper. Lesson learned for the future courses.
As for repository, this whole course was actually a bunch of separate experiments showing Livewire features, so we didn't even make attempts to save it all as a single repository with all the history of changes, so we ended up publishing just the latest version of what we had, after all these experiments.
Hi Povillas, What lesson number can I see that the parent have to two child components and the child components communicating with each other? Thanks in advance for the reply.
Use livewire events to communicate between two child components
Excellent course, thanks