How to Implement Dynamic Dependent Dropdown Using Vue.js In Laravel | Tutorial

hey guys saban sharma here and i'm back with another tutorial and in this tutorial we'll be talking about implementing dependent drop-downs using vgs and laravel so in here i have a simple setup a section belongs to a certain class and a class can have multiple sections so we need to implement dependent drop down here so when i select on class 1 then i want to load all these sections belonging to this class that is class one so we will be implementing this using vgs so let's talk about the quick setup here so what i've done is i have defined two series one for the class here the class uh so i have defined class one two three four and five and section zero so each class has two sections that is as you can see i have defined section a of class one and section b of class 1 and so on for all the other classes and i have already defined the database and a few fields in the classes and sections table so class has a field called name and the sections has a field called class id and name so what i'll do here is i'll just go ahead in my terminal and i'll migrate let's migrate fresh and i also want to see it and let me make sure that the database seeder is actually calling the classes seeder and section seeder so i haven't called that so let's just save this and now let me just migrate fresh and see the database so our cd has been completed successfully if you go ahead and check our browser we have classes of one two three four and five and we also have sections of section e and b each belonging to class one two three four and five so now this is done let's go ahead and also install laravel ui so we'll be using laravel ui in order to implement in order to define view scaffolding so composer require lot laravel ui i think this is the [Music] index let's just hit enter and i'll be right back once this finishes installing so the laravel ui package has been installed successfully and let's quickly create the alts uh this scaffolding for view so that will be php artisan ui view let's copy and hit enter and now we need to install the required packages for npm using npm and i'll be right back once this finishes installing so the npm packages have finished installing so now let's quickly run npm run watch to compile our javascripts and then we'll start working on implementing the dropdown using vue.js so this will install the required packages for view and i'll be right back once this finishes installing so our javascript has successfully compiled and now the main job starts let's go ahead and we have a create.blade.php here so what i want to do here is i'll just copy the form group part now the form group okay we can copy the form group part and cut that and let's define a new view component named create student let's name that at student let's keep it like that and okay so we have create student component defined here so now let's go ahead to our resources js components and define a new component called create student dot view and let's first register this component so in here we have viewer component this will be named as create student which is located inside components create student dot view dot default and we also need to do one thing maybe two things before we start working on the view part that is we need to define the id of app so element app so we need let's go ahead to our master.blade.php and in here since we are yielding the content so what i'll do here is i'll just define the id of app to this div and another thing that is we need to define the app.js so we need to call the app.js script that is will be using mix helper function which is located inside jsapp.js so in our createstudent.view let's define the template and inside template let's define a root element of div paste that let's format this properly and let's also define the necessary script tag that will be javascript.view and in here what i want to do is i want to define a data function and okay for now let's leave it like that and let's just go ahead and define the necessary apis for our classes so whenever i select a certain class then i want to make a query by sending that class id and fetching all the sections of that specific class so that's how we will work on this so let's define a new route for route get that will be we want to get all the sections of a certain class so we could also use route model binding and let's define a function that will be php artisan make controller and make sure to spell that correctly section controller okay we already have that controller okay that's good in our app http controllers we have section controller let's define a new function called index and let's first define the class id here this will be we could actually use the request helper function and the way and we will be defining the key as class id and then here i want to make a query that will be sections section will be section where i made a mistake section is a model section where the class id is this class id and then i want to get all of the records and we can also use the api resources here so let's go ahead and define a new api resource make resource section resource okay i have made a spelling mistake so php are decent make resource section resource so the resource has been created we don't need to do anything to that resource it will just convert our data into json format so here i want to return the section resource collection and then pass in the sections this should work properly so now in our api.php section controller plus and the function is index and maybe we don't need this class let's save that and let's go ahead to our createstudent.view and we have data and we also have a property called mounted but maybe we we need the mounted function as well so here let's define two properties for our data so the first one will be classes which will be empty and the second one will be sections which will also be empty okay i'm making a small mistake so this should return object and then we need to define the classes here so we also need to define the resources api resources for classes so let's define that as well since we will be getting all the classes when the component is mounted so we need to fetch all of the classes so classes resource and now let's go to our api.php and define a new get route for classes and we want to go to classes controller index so we haven't defined this yet the class is controller define a new function called index and here i want to get all the classes so classes all and let's import this class and here i want to return classes resource collection and then pass in the classes so if i go ahead in my browser and then type in okay we need to specify the api as well target class classes controller was not found okay so in our api.php but we have the classes controller we have so we need to import this save that and reload so we are getting all the classes so that's working fine and now in our createstudent.view so we have classes and sections as empty so when this component is mounted then i want to make an exhaust exhaust request to slash api slash classes and then when i get the response then what i want to do here is i want to assign the classes to response or data so let's save that and let's go ahead and reload our browser and we also need the let's check out the view component so as you can see we have classes with the data property okay we need one more data here so response.data.data since the pagination happens one more data element so now we have five classes so what we can actually do is we can loop through each of these so option let's loop using b4 and let's use item we can't use class because that is a protected keyword so we can use item in classes and we also need to specify a key that is class dot id okay it's not class but item dot id and the value will be and we need to bind this so the value will be item dot id and the name will be item dot name so let's save that and we should see five classes been displayed on our select tag okay so this is working fine and the next thing that we want to do is on every change of this class what i want to do is i want to make an api request and then fetch all of the sections so for that let's remodel the select tag so we model with let's define new property called selected class and define that in our properties that is selected clause which will be empty by default and now if i go ahead and reload the browser and so this is empty by default and when i click on class 1 then that is set to 1 2 3 and so on so now whenever that property changes so we need to watch for the selected class property so whenever that changes then we want to make an api request so in order to check for the selected class we are defining a new watcher so when the selected class changes then we'll be executing a function where we want to make an api request to xcos.get i want to make an api request to slash api slash sections and i need to pass in the selected class and then when i get the response what i want to do is i want to assign those values to sections that will be response or data dot data okay so i think one more thing that we need to check here is since we are sending this selected class okay so here i need to specify the class id okay this will be the get parameter so we'll be sending the class id as a key and the value will be actual class and then this will go to the this will hit this api and which will go to the index of our section controller and here we'll get the class id so let's return the class id in order to check whether this is working fine or not and i'll also be showing you the network request of the api we are building here so when i click on selected class one then it is making an api request to sections with the class id of one when i select class three that is making an api request with a class id of three and okay we haven't console.log so let's go ahead to our createstudent.view and in here what we can actually do is let's console console.log the response dot data remember in this case uh we are only logging the response.data and not response.data.data because this data is uh actually added when we paginate the results so in our case we'll only we'll get the id when we console.log the response.data so let's go ahead and save that and now if i go ahead and reload our browser let's open the console tab and if i click on class 3 then as you can see i'm getting a value of 3 and if i click on class 4 then i get that i'm getting a value of class 4. so this is working fine and now what we are doing is we make an api request to section with the class video of this selected class and then what we are doing is we are assigning that response to this sections so save that and again go ahead and reload our browser so everything should work fine now so i have the query student.view so the selected class is empty for now if i go ahead and select class one then selected class is one and the section object is empty so what's the problem here console.log the response.data.data and see okay one more thing that we need to do here i think this is working fine what i didn't do is in our section controller i didn't comment out the return statement so now if i go ahead and reload the browser and click on class three let's check out our previous students so as you can see we have in our sections area we have two items the first one is class id3 and the second one is the section a and section b so everything is working fine here and the last thing that is only left to implement here is to loop through the sections so what i'll do here is i'll use v4 so option v4 section in sections so we also need to provide the key and in this case it will be section dot id the value will be so we need to bind it here so i need to pause the colon the value will be section dot id and in here i need to display the section dot name so let's save that and go ahead and reload our browser once again so now if i click on class 2 then as you can see section a of class 2 and section b of class 2 are displayed if i click on class 5 then i get the response respective results for class 5 as well so this is working fine and this is how we implement dependent drop down using vgs in laravel so this was for this video and i hope you like the content so if you like it do subscribe to the channel and i'll be posting some more uh related stuffs in the future as well so stay tuned for that and have a great day and i'll see you in the next one

Channel: Tapan Sharma

Views: 2,005

Keywords: laravel, ajax, php, laravel 8, laravel tutorial, vue.js dependent dropdown tutorial, laravel and vue.js advanced tutorial, dependent dropdown tutorial, implement dependent dropdown with vue.js and laravel, vue.js tutorial, laravel dependent dropdown, how to make dependent dropdown with vue.js and laravel, laravel vue.js basics, dependent dropdown with vue.js and laravel, laravel vue.js, tapan sharma

Id: F99aL7nKot0

Length: 18min 39sec (1119 seconds)

Published: Thu Apr 22 2021