How to use Select2 or Multi-Select Option with Livewire and Laravel

all right friends welcome back to another video on building multi-purpose laravel and live web application and in this video i'm gonna show you how we can use select two with live wear so first of all let me give you the demo of what we're gonna build on this video so that you will have some idea before we start so if i click on add new appointments over here you see this new input over here and here i am using selective and while using select we can select multiple items from this list like this and these are the dummy data for now you can make this data as dynamic as well so let's get a new appointments with this client with these data for now let's imagine these are members and then select the state select this time and then let's click on save and it got saved successfully so let me show you now this and it is added over here and those items are saved as text in the format of array so now if i go to edit appointments over here and these items are pre-filled and we can delete those items or we can add more items for now let me delete this and click on save and it got set so let me go back to the database and it got from here as well so let's get started building this functionality okay so let's start by adding the field over here so we'll be using this one and if we go to forms and then advance element you will see that here is the field called multiple and let's do [Music] viewpoint source let me find four multiple and then let me grab this one let me go back to create appointment form and over here let's do over here let me paste it okay and then we need to do wrap it with the 1d so let me indent it and then let's wrap this with another div [Music] right and then let me move this inside okay now let me intend it okay fine so now let's see it in our browser and it is added over here so let's see what is the issue from group and then we missed okay and i think everything is fine yes now we see it so let's send it again now the second step is to install select two so first of all let's change this name as well name is level is select select team members okay fine so we have already installed this theme so if we go to view passwords and that let me search for select okay and we need to use this css so let me go to the main layouts called after black.psp and then over here go to the top and we paste it okay so remove this and use asset backend plugins and we have already this install on our system and then let me go and grab javascript as well let me go to the end and here you see the javascript so let's use that over here okay let's do the same as it backend and then plugins yep we show you that these are inside of public and then back ends and then logins we already have this plugins available okay fine so now if i refresh the page you will not see any changes so first things we need to initialize selecting on this element right so let's do that over here let me add a new script tag over here let me use the setting for documented ready function okay now we need to select the specific element so let's say select to this is the class name of the element so let me show you that and it is over here selected and on this specific element we need to initialize select two so for that you need to do dot select two okay now let me go back and refresh the page and it got initialized and it is working but we don't see this text properly right so to fix this we need to use the theme called body strap 4 because we are using body strap 4 right so for that we need to pass object over here and then we can do something like theme and then put this tab for okay let's try this again yes now everything is looking good now let's go to create appointment form component class create 0.94 and then over here let me do die and don this stage okay let me refresh this and if i select this select this one let's select this state and then click on save and we don't get that value right we don't get that value so we need to make this workable this is the weird issues while using live wear so so to fix this we need to listen for the sends event so let's do that let me have the letters psp and then over here we can listen for the change event using dot on sends let's pass closer and let me do a lot here now if we sense this and we get a lot of messages if i change this to another item we get the alarm which is perfect so while changing we can simply set the values using dollar this okay let's do download this dot set and then we can set value stated members to this dot value so let me describe this first here dollar this reference to this element and you can get the value from here while it is sensing and the thing dollar this is specific to live wear so we cannot use outside of live wear component so if i save and click on refresh then you will get this area trying to get property id of non-object because this directory is specific to live web and we cannot use outside of component library component so we need to place this script inside of our component so let me remove it from here and i think we have created a stack of zs so let me go to create appointment form and at the end over here we can use that split so let me indent it now if i refresh the page we don't see the error so here dollar this what it returns so let's see what it returns so let me go to the top and then let me do download this and you see here it is returning window.liveware.find so let me open up the console and then let me paste it and then hit enter and it is returning the proxy and on the proxy we can use dot set method to set the values on public properties which isn't create appointment form we can set this you can set the values over here so you can simply do dot set and then we need to pass uh this name so for it uh for here we need to do state dot members right because we are using area so we need to use state and then dot members and as a second argument we need to pass the value so for now let's pass this array which is let me use this value taxes like this if i hit enter and here this line got executed and we see this way design issue again so to fix this design you see we need to do wire ignore so let's do that let me go to create appointment form and then over here let me do [Music] where ignore let me refresh the page again and it is giving this new instance so paste it and we can call the set method and we want to say state dot members to [Music] let's say taxes all right and while executing this code it will send the network request so let me clear this and then show you yeah it is returning undefined and if we go to network tab it it is sending the expertise to the server okay perfect so now let me close this and then try adding this client with these items with the point and date and appointment time and click on save and now we got members and it is areas of two items which is profit so now we are on track so let me go back to create appointment form and we need to save those values right so over here let's define members and then let's make this as knowledgeable right and we haven't this added this field on our database so let's add that field now so let me open the terminal and let's do psp artisan make migration add members field to [Music] appointments table define this as text because we are storing those areas as text so let's do members let's make this as nullable and by default let's set us now the column name is members so now let me do psp addition and then this got added to our database yes it got added over here so let me go to appointment and then before that let me show you what we have to create a point form let me remove this one right now we don't need it go back to this space refresh it and then add new appointment with these items and if i click on save you i expect to see one error called array to string conversion because we are trying to save those areas on in our database but before saving that we need to convert that to text so to convert that to text we can simply do we can go to appointment model and over here on the cast array we need to define the field or attributes name is members refresh the page again and then let me try one more time with these values appointment time and click on save now it got saved successfully perfect if i click on refresh this page and it got added over here as well we are done with adding the appointments right now if i click on edit we don't have that field so let's do that now let me go to create appointment form let me copy everything from here and go back to update appointment form and then over here paste that good so let me add javascript as well and in the next lesson we will see how we can use this or how we can reuse this same component so for now let me copy this and paste it over here okay so now let me refresh the base and you see the items but it didn't got prepared right so to fix that let me go to the top and let's add wire model over here [Music] new items and if i click on save it got saved and it got sent to our database as well right so if we go to update appointment from component class we already have this state available and we are filling that is set with appointments to array so it is automatically working right so this is for this video i hope you learned something from this video so don't forget to like share and subscribe to this channel and in the next video we will see how we can create the invisible components so till then stay tuned and have a great time and i will see you on the next one you

Channel: Clovon

Views: 13,639

Keywords: coding, tutorial, laravel, laravel and livewire tutorial, laravel and livewire project, livewire tutorial, laravel application development, learn laravel 8, learn laravel framework, laravel crud, laravel crud tutorial, laravel how to, livewire events, laravel livewire popup modal, laravel livewire tutorials, laravel livewire, select 2 with livewire, how to use select 2 with livewire, multi select option with livewire

Id: 54ROoWp3Cdk

Length: 17min 21sec (1041 seconds)

Published: Tue Jun 15 2021