Using wire:key and refreshing child components (troubleshooting Laravel Livewire v2)

hello everyone in this video we will take a look at some of the problems you may run into when working with child components some of the problems you may encounter are unwanted reordering of your child components child components becoming unresponsive and child components not refreshing their data there are several ways to get around these problems but in this video we will focus on solving them using wire key because that will help you solve a lot of weirdness with livewire components in general let's have a quick look at the domain we will be working with it consists of a project with tasks this is the project table it has a name and an active state this is a tasks table it has a forum key or belongs to a relation to a project and a name this entire form is the parent lifer component and these tasks are the child components the functionality we want to achieve in this example is that the task name inputs in the child components should become disabled if the project is inactive i've already written the required functionality but for some reason it isn't working without a page refresh let's have a look at why livewire is not properly refreshing the child components if i set the project to inactive and refresh the page you can see all the child component inputs become disabled however if i use the switch nothing seems to happen but if we refresh the database you can see that it was in fact updated to an active by the form we have run into two problems first of all as you may have noticed the order of the tasks has changed let me show you again so we'll set this to active again refresh the page we have mr tony as the first task and then we toggle the switch and there he goes he's now the second task if you suddenly see the order change inside a loop there is often a big red flag that livewire is having dumb different issues the second indication that lifor is having problems is less visible to see it we will have to take a look at the network tab in our developer tools let's set this to active first there we go if we now start toggling this switch we can see that only the first time we do it there's actually a network request being sent after that livewire is basically broken down when you spot these kind of issues you have to know from experience that these issues often indicate a problem with your wire keys the problem of them being that you do not have any let's open up our parent component and see how it actually renders the child components the child components are rendered inside this loop if we take a look at the troubleshooting section in the livewire docs it specifies that you should use a wire key when you have elements inside loops let's give it a go so we'll add our wire key here and we'll use the index srp and just so you know you can actually achieve the exact same thing with a different syntax which is wire key and then you use blade to render the key i prefer the syntax so we'll keep that let's refresh the page if we now start toggling the switch we can see that everything starts working the order isn't changing anymore the network requests keep firing however the tasks still don't become disabled if you come from a few backgrounds it's important to know that these props project and the task are only passed in the first time that livewire renders the child components so that the state of the project changes is something that the parent component knows but the child component does not life are actually used as the key to determine if it should re-render the component or not as the index doesn't change we still have three child components it sees no reason to refresh the child component so how can we solve this the approach we will use is that we will change the key when the state of the project changes to do so we'll actually add the active attribute to the key so we'll go like this project active also in general i would recommend not ever using the index as a key but if you're working with models always using the id and if we now refresh the page and start toggling everything should work because now every time we change the state of the project that will in turn change the key here and because the key changed live wire will completely re-render the child components that was all folks thank you for watching i hope you learned something and see you in the next video

Channel: TALL Programmer

Views: 5,972

Keywords: Laravel, Livewire, Tall stack, Php, Programming, Laravel Livewire, Troubleshooting, Child components, Dom diffing, wire:key, wire key

Id: jDEH9qw2UiQ

Length: 6min 5sec (365 seconds)

Published: Sat Jan 22 2022