How to Implement Dynamic Dependent Dropdown Using Laravel Livewire | Tutorial

hey guys stephan sharma here and i'm back with another tutorial and in this tutorial we are going to be talking about how we can implement a dependent drop down using laravel live wire so what i've done here is i have fresh installation of laravel application and i'm using laravel version 8 and i have also installed laravel live wire as you can see in our composer.json file i'm using laravel version 8.12 and liveware version 2.3 but it doesn't really matter which version of laravel or library we are using because the logic will be same in all all of the versions i have also set up a few files here like a file called dependent drop down and which consists of nothing but a simple markup which is live dependent drop-down tutorial and this is the page that we can see here so we'll be implementing uh implementing a simple form here so our first step would be to create a simple php artisan [Music] there is a simple livewire component and i'm gonna name it assignment and hit enter so our component has been created if we go and check that okay this is the assignment component and the blade file so what i'm gonna do here is i'm quickly gonna set up a form a simple form and be right back so i created a simple form which actually does nothing but in real but in a practical application we are we need to specify all the actions and the methods but uh because i'm only implementing the drop down part so i'm only including a simple form and a label with a value set a class and a simple submit button and whenever the wire is in loading state it is going to add an attribute called disable so the bus button will be disabled when the wire is loading okay so let's create a input type of select we don't need the name we also don't need the id but let's give it a class of form control which makes it look better and let's also give up option of select a class and let's go to our assignment model and fetch all the classes okay let me just show the database first what i've done here is i have created two models called classes and sections so classes has two rows class one and class two which has an id of one and two and sections so class has many sections and a six and a certain section belongs to a particular class so sections has value section a and b c and d and class one has class uh class one has section a and b and section c and d belong to class two so what we can do here is we can [Music] fetch the classes classes where okay we don't need the vat here we only need to call the all method and this will be available to our assignment.blade.php file so we can what we can do here is we can look through it so for each classes as item what we can do is we can define an option with the value of item id and let's display the class name here and now if we go and reload our page we should see the classes okay we didn't include that component here so what we need to do is let's include that assignment component live assignment and now reload the page okay we are we can see that we have a select option with the value of class one and two and whenever a user select a class we should fetch all the sections relating to a certain class so how do we how do we do that so what we can do is we can go to the assignment.php model and define a few properties called selected class and let's make it null by default and let's also define a property called sections so this sections probably will hold all the sections belong to which belonging to a certain class and now what we can do is we can go to the assignment.blade.php file and wire model with uh with the selected class and every time i change the value of the selected every time i change the class then this value will also be changed since we are calling the wire model property and i'm also displaying it here so we can check that out if i select class will see value of class id 1 and class 2 has a class id of 2. so now what we can do is we can go to our assignment component and we have a property called life cycle books in live wire and the way it works is by whenever a certain property change changes then it calls the then it automatically calls all these lifecycle methods and from all these what we are gonna use is call the method called updated foo and the foo is called the property name here so whenever a certain property changes is updated then this method is automatically called so the way we we can define this method is by calling updated selected class and this is going to receive the value that is updated so whenever a class certain class of id changes certain id of a class changes then this method will be called and it also we will also receive that value as a parameter in our class id and what we can do here is we can [Music] now fetch all the sections of that class so we can make a query of section [Music] where the class id is the class id that we receive and we also need to call the get method and now whenever we change a class then what is what is going to happen is whenever we change this value then it will call the wire model with the help of our model property what we can do is this property will be changed and when this changes then it will go to it will execute the all the life cycle hooks and while executing it will also execute this method and it will also send the class id as a parameter and whenever this changes what we'll do is we'll set all the will assign the sections property with the sections where the class id matches this class id and call the get method now this sections has all the sections all the sections value that are selected from this class id so now what we can do is we can go to our assignment.blade.php and let me just copy this form group paste that here and what we need to do here is we need to call the if condition so we need to check whether our sections property is null or it has certain value so whenever this we have uh whenever there's a certain value then we want to display this drop down menu with the value of select a section [Music] and we'll be looping through each of the sections as item and we'll be displaying the option value of item id and the item name and we can also use the wire model property here so selected section [Music] and let's also change that to a select a section and let's define this property in our assignment so public selected section is null by default and whenever this sections property changes then we are going to display this part okay and let me also display this selected sections property so now if we go and reload our page everything should work fine properly now we are we haven't selected any class so our sections drop down is not visible yet and whenever i go and select class 1 then we get a drop down saying select a section and we as you can as expected we can see the value of section a and b and if i choose class 2 then section c and d appear and the id of section c is 5 and everything is working as expected so this is how we can actually implement dynamic dependent drop down using laravel using live wire and it is quite easy to implement as you can see if you like the content do hit that like button and make sure to subscribe to this channel to get all the future updates and i'll be releasing uh more tutorial related to laravel and livewell in the future so stay tuned for that and until next time have a great day and see in the next one

Channel: Tapan Sharma

Views: 7,545

Keywords: livewire dependent dropdown tutorial, laravel livewire for beginners, dependent dropdown tutorial, implement dependent dropdown with livewire, laravel 8, livewire, livewire dependent dropdown, laravel, how to make dependent dropdown with livewire, laravel livewire basics, dependent dropdown livewire, laravel livewire tutorial, laravel livewire, tapan sharma

Id: PMZyk7X3wUg

Length: 12min 42sec (762 seconds)

Published: Sat Dec 26 2020