Laravel Livewire update dependent select menu's on change

okay so in this video i'm going to go over how to use laravel livewear and have dependent drop downs so the example i'm going to go with is we've got clients and and contacts and the contacts belong to clients so each client can have its own unique list of contacts so what i've got set up is i've got two migrations one for clients which is just gonna have a name i want for contacts i'm actually gonna have a client id and a name and within the clients table i've got very fictional contact three fictional clients so we've got three of them there outside these one two and three and i've got a contacts table and we're in a contacts table i've created six contacts and i've rotated the diff which clients i belong to so the factory records all belong to the first client and then these two belong to a second client and then the last one it belongs to the third client so that way we've got three different client records and they all have their own unique list of contacts so in order to run this i'm going to need i'm going to close this down now i'm going to need to create um a live white component to run for this process so i'm just going to come out of here and quickly create a new layer component i want to call it contacts okay so that's now being created in http and livewire and uh contacts so what i'm going to do is i'm just going to create um i'm going to create a new file i'm going to create a new root first to go to that file which i know i'll create a rule that goes straight to this this um classic we've just created so look into into my web file uh so i'm going to do is create a new uh get root uh we'll call it contacts um that's gonna go to the fabric class that we just created uh called contacts and that's gonna route straight to lab wire and move straight to the class and i'm just going to import this to make it a little bit cleaner okay so that means that now i can go straight to contacts and we should load that router so if i go to slash contacts which is not app it's just contacts so that loads up also it doesn't do anything yet because we've just created an empty route that doesn't actually do anything but that's fine all right so what i'm going to do now is open up the contacts class and then open up the contacts view so see the view file doesn't really do anything and just put some text in so we can see that he is actually loading that page okay so far so good so if we go back to the render um one thing we're going to need to do is to load up the the clients and so we could put this in the in the render but i'm going to do it i'm going to render i'm going to load it into a mount instead so that's going to do is create public property called clients and then the second one will be the contacts and i'm going to do a public property public method called public function called mount and the mount is just so you can use to load up the data so within this i'm going to say this clients equals i'm going to bring in the client and i'm going to order order by the name and then i'm just going to get all those records okay so that will do for now so then inside of my file here i'm going to do select and i'll give it the wire model which i really want to be client id so really yeah clients is going to be the actual literal clients themselves just to populate it but then for the particular client that we've got selected uh we're going to call that client id so we've got something to listen for after the y model name would be client id for the select and inside the select i'm going to say 4h clients client and insider i'm going to put in the option option value and i'll put in the client and then the id and then i'll put the client on the name and i just need to close the for each loop okay so i've done all right we should now see a menu and we've got list of clients so one thing i should also do is before this list you just do an option give it a value of nothing and just say select way we've got one selected by default and we just select the various class so what we want to do is we essentially want another another drop down for the contacts and depending on which client we select we want to see a different contact just for a little bit of cleanness let's just do a label and we'll say a client and then in this one i'll just give an id to certain links the label off with the label let's just give it a little bit it makes it a little bit cleaner okay so i'm going to duplicate this whole thing put it down here and this could be the contact okay so we've got contact id for the contact label that's going to link through to the id for like this section i'm going to link through to a particular contact which means we also need contact ids should we want to do i mean that's kind of bell scope what we're doing initially we just want the drop downs to change uh we're just going to show you if we also go further that you'd want to have a client id to use with so i'm going to look for the clients so these also want to be called contact and again this can be just for the id and name it doesn't need to be any more than that for now so if we go back to our model so what i want to say is if this client id if it's not empty then i want to say this contacts equals and then i want to i want to list out the contacts so i want to have contact again one and get it for the model but now answer where the client id matches uh this client id and then i want to get all records so what this is going to do for all the contacts where the clan id matches the current selected client and bring it all out okay so within the you know populate the contact form selected contact otherwise we're going to use an empty array so i'm going to come back and we'll let the page we've now got contacts and we've got an array that's empty so now if we select a particular client client and our contacts is still empty and the reason for that is because this has been mounted it's presented being cached so this doesn't actually change so for instance if i select the client id and select that to um the third record and then refresh the page we've now got the third one because it's it's kind of cached and if i change that to the second one i'm gonna change that so we've got those two and if we change the first one we should have three within this list and when i get free within this list but it doesn't change when we set to a different array a different client so if that's a different client this doesn't refresh so the way to do this is we can look at we essentially want to change this and because it's mounted we can't do it here but what we can do is we can look at an updated in event so we'll do a public function and the live wire has an updated function so when when something has been updated and it probably updated this will run but then you can also specify for a particular property so i want to say when a client id has been updated and i'll just run this out just error out so we can see that actually runs okay so if i refresh the page select to a different client and that that is that is running okay so then what i can do is essentially just do the same same process again so when this changes as long as the client isn't empty then popular the contact space on the client has been selected okay so now if we come back and refresh the page again and so i was like decline and that just is same because we've not told it to kind of unselect itself but i've got to the first client we've got three it goes to the second one and the there is one and then go down to this second one third one here and then there's two within there so now we can we can change these based on well when we change a client these are essentially reloaded so last thing we really want to do is saying if you don't select any then then that should be updated uh but you can't do that for the update because it's not actually being updated which i wonder if you can do it this way if there's not you know let's see if it runs that way let's just try it so we've got some contacts and we'll slay select to remove them and that does indeed remove them so we're doing this actually runs even when we unselect the decline and we have the default options there i mean we're simply duplicating it twice so it would be nice if we can call this in this separate way so it's great method called get contacts and then put this within that because it's the same it's the exact same code each time uh and that's certainly fairy we should then be able to get contacts uh to call this out and then likewise on the initial load we should be able to do that as well uh so if we come back refresh the page so we are getting the data initially and if we don't select one we don't get no contacts and if then sets a different one it is indeed updating and re-rendering itself and then we'll get two out so this is really good so if we go back onto the front end we've essentially got two drop downs that from as far as you can see from this side of it not really related to each other but on the class side that they are so if you just click that so essentially i mean for this example we don't i wouldn't even need the contact id um so we've got a list of clients we've got list of contacts and we've got a client id and so we don't really want a default example come back refresh then these are all empty by default until you actually select one and that's when then then populate so this is something i was stuck on recently and then browser solution wasn't that difficult to solve essentially the solution is is to when the property is updated you can cause updated property name and then do something with that data as it gets updated and in this case because i was doing it on in the mount and then i was doing it again entirely updated it makes more sense to extract this to a certain method which does that populates these properties but then you can call it both times when you're not duplicating your data

Channel: David Carr

Views: 707

Keywords: Dependent Select, Laravel, Laravel Livewire

Id: JXtZdnUv7IE

Length: 12min 27sec (747 seconds)

Published: Sun Sep 12 2021