Todo List App with Laravel and Vue.js

[Music] in this video we're going to create a to-do list with laravel on the back end and vue.js on the front end so let's open up our terminal and make sure we have the right programs installed first thing i want to do is confirm that composer is installed we'll do composer dash capital v and we have 2.0.6 let's confirm that npm is installed so we'll do npm dash lowercase v and we have 6.14.6 and let's make sure that php is installed and we'll do php dash lowercase v and we have 7.4.3 i'm going to clear this out now since composer's installed the first thing i want to do is we're going to use composer create dash project dash dash prefer dist and then laravel slash laravel and then the name of our project since this is a to-do list i'm going to call it to do list all right so our laravel project has been created let's go ahead and cd into our to-do list i'm going to use php artisan serve and that should spin up a web server for me and let's open up this url right here in our browser cool so our laravel application is installed it's being served up at port 8000 and we can see the default laravel application installation here the next thing i want to do is open up vs code and let's see our project file open and we'll do our to-do list the root folder the first thing i want to do on my project is i'm going to open up the env file this is the environment file which holds all of our database connection information if you're using broadcast redis any mail setup aws your pusher information and more pusher information so i want to set up a database since we're going to be using laravel with a mysql backend i've already created a database that's called to do list my username is going to be scriptster and my password is just password if you're doing this in production pick some more secure information since this is just a demo i wanted to keep it simple the only other thing i want to do in here is change the name of our app and i'm just going to call it to do list and that should be good command us to save since we use composer to set up our project we already created our app key so we don't have to worry about that that's been done for us if you haven't already just make sure that you've created a database give it a name give it a user login and password and make sure that's reflected right here that should be it for our env file i'm going to open up the terminal again now because i want to create a model and a migration file for our database now that it's linked i'm just going to open up a new tab in my terminal and for this to create a model with a migration file we can use the php artisan make model we're just going to call it item and then dash m all right so we can see our model was successfully created and it also created this migration file create items table so let's go take a look at that up here in our database folder under migrations we should see items table what that command did for us it created this migration file and by default we get a public function up and a public function down so what we want to do is we want to add some columns to our new items table and i'm going to do that right here the first thing i want to do is i'm going to do a string and whenever anybody adds an item i want to give it a name so i'm just going to use name here and then i also want to add table and this one's going to be a bully because i just want true or false if this item's been completed and we're just going to set a default value for this by default whenever a new item's created i just want it to be set to false because if it's just created you haven't done it yet the next thing i want to do is track whenever an item is marked as completed so this is going to be a time stamp and we'll just call it completed at and we're going to set this to nullable because if we haven't completed the item yet we're not going to have a time stamp for it and we can leave the default table id and the default timestamps so now that our database is connected in our env file we created our migration file let's go ahead and run the migration and make sure that it created this table along with these columns for us go ahead and save this command s to save and then let's jump back over into the terminal i'll clear this out and to run this migration we can use php artisan migrate and there we go we can see that it migrated this file and along with some other files that were in the migration by default we're not going to use those but our create items table has been migrated so we should be good let's go ahead and move on to our controller so that our laravel application can now talk to this table we'll open up our vs code again and i'm going to close this out for now we shouldn't need it i shouldn't need this.env anymore and if we come up here to our app http controllers we just have a default controller but we want to create our item controller so we can do that with the terminal command and i'm just going to clear this out again and this command is going to be a little bit longer but we should be able to do php artisan make controller and then item controller that's going to be the name of it and then we're going to do dash dash resource and what this resource does for us is it tells the controller when you create it create all the resource functions for us and that's just going to save us some time it's just going to lay out our controller file for us so go ahead and press enter our controller was created successfully so if we go back over to our vs code we now have this new item controller i'm going to click on that so now we have a controller we're going to use this to talk to our database but before we do that i want to use the routes file to point to these individual functions so let's go ahead and point some routes at these and then we'll write these up so that they do something our routes file you can do this in a few places i like to do this in the api a lot of times when i'm writing software i'm talking to an api backend you could do this with the web and create blade files if you wanted to you could use this right here and create all your routes here and create some blade files inside of your resources and then views but i'm going to do this in a view front end and i'm just going to use api routes so go ahead and open up your routes click on api.php and let's pop some routes in here so the first route i want is just the default route it's going to be my domain slash api items and that's just going to grab all items inside of my database so we'll do route colon colon get and i just want to grab slash items after the word items or after our route we're going to put a comma and then pass it an array and this first item in the array is going to say which controller to use so we're going to do item controller colon colon class and then comma and the next thing is going to be the specific function that we want this route to hit for this route i wanted to hit index the other thing before we get too far along is i need to import this item controller right here so we can use it so i'm going to do use at slash http slash controllers slash item controller and we should be good so now that we've imported it right here we've said to use this item controller this should work so make sure you put the semicolon at the end now that we have our items route the next thing i want to do is i'm going to create a route and this time i'm going to use prefix i want to prefix it with slash item we're going to put that all on a group and for the group we'll use function and now let's define some routes inside of this slash item group the first route i'm going to do is we'll do route post and this will be the create or the store function so we'll just call this route slash store put a comma we'll pass in our array and the first item inside of our array is going to be item controller then we'll do our colon colon class again a comma and now the second parameter in the array is the specific function inside of our item controller that we want this store it's going to hit slash item store and then which function do we want it to hit in this instance i wanted to hit the store function so we'll put store right there and let's just go ahead and replicate this for this route i'm going to use a put and for put we can use our curly braces and pass in the id so it'll hit item slash and whatever id i pass with this route will automatically go into our item controller and i want this to go into the update function so when i write this update function in a couple minutes i'll be able to grab the id that was passed in with the route and use it to find the id of whatever item i want to update and the last thing i want to put in here is delete and i also want to use the curly braces on this one to pass in an id and we're going to use that id to grab the idea of a specific item to delete it and we're going to hit the item controller and we want the destroy function this time inside of our item controller so we should have four new routes we have items so it'll be our root domain slash api because we're in the routes api file slash items which is right here and then it'll be root domain slash api slash item slash store and then our root domain slash api slash item slash on id that we're going to pass and then also the same route again but we're going to pass it instead of using the put we're going to pass it as a delete and i'm getting a little one right here with a squiggly so let me just fix this real quick we're going to put this down i just want to fix up the indentation and that should be good to go so make sure you add your ending semicolon after this so we're all saved so let's go ahead and write that controller so we should be able to close this api file right now we're going to go back up to our item controller and now we should have some routes that are going to hit these controller functions let's go ahead and write our first function the first thing i want to do is i want to bring in the model we created the model over here when we used our command and this item model it automatically created this file for us so now we can use it and it's going to point to that table in our database so we'll come over here and let's just add it right here we'll say use app slash models slash item we've told our program we want to use it we can use it down here so the first thing i want to do is if you come in in the regular slash api items it hits this index function i wanted to just return any of the items in my to-do list so let's say return we've already imported the item so we'll do item and then we'll say order buy now when we originally created this we said you use the time stamps which creates two columns in our database table one of them is called created at so we'll use create it at so i want to order when i grab all these items i want to order by the created at column and i want to order by descending so i want whatever the newest item is at the top of the list and then we can use the arrow and we'll say get and we're going to return all those items that should be good for our index function and before this will work we need to add some items into our database or else it's just going to pull an empty return so i just want to save this and let's go down and we're going to we're going to pass over this create function since we're not using blade files you could use this in here we're gonna skip it and let's go down here to our store so the next thing we wanna do is when we receive a request we wanna store it when we hit slash api slash item store it's going to go right here to this function and what do we want to do when we hit this function we want to save a new item so let's go ahead and do that i'm just going to create a variable and call it new item we'll set it to new and then the item model that we imported up here so we're saying create a new one of these alright and the only thing we have in here that we want to set is the name so i'm going to say new item name and i want to set it to the request that we received i know that when i send this in i'm going to have an object called item and it's going to contain a property called name so i'm going to say item inside of item we're going to have name so i'll say name and the last thing we need to do is save this so we should be able to say take this new item and save and once it's saved we're going to return the new item so our browser knows that this was saved successfully now that we have our store function set up and our index function set up let's see if we can store a new item and return it so i'm just going to save that and i want to open up postman and let's create a new item so we know it needs to be post we know it's going to go to http colon slash for this i'm going to use 127.0 and it's at port 8000 and we said we're going to use api routes so we'll use api item slash and we want to hit the store function we already created this route a couple minutes ago so now that we have our route up here i'm going to change my headers i just want to have another header down here and we're going to say content dash type and it's going to be application slash json so now we have our content type we're going to click on body and i'm going to do raw data and we're going to pass it this request we said we're going to have an object called item and inside that object we're going to have a property called name so let's pass our to-do list a name i'm just going to say take out the trash that's going to be the first item on my to-do list and let's send this over cool we didn't have to tell it they created that and they updated that it automatically populated that information for us now that we were able to create an item let's make sure our index function is working and returning this item to us so this time we're going to use get we'll use the same route except this time we're just going to leave it at api items because we just want to get all the items and that's all we should need so let's hit send and it returned our only item in the database right now we can see that our completed ad is null completed is zero we have our name we have our id and then we have our created at and our updated app so let's keep going the next thing i want to do is create our update function so now that we have an item in here if we wanted to update it with completed and completed at we need to have our update function working so let's open up our vs code again and we're going to skip over show and edit and we're going to move right down to our update we said earlier we're going to pass an id in this instance we only have one item in our database so our id is probably going to be one but we're going to dynamically grab that off of the incoming route and we're saying we want to use that id in our function so that's what this is right here let's go ahead and we're going to call this existing item because we want to grab an item from our database that already exists so we can say existing item we're going to set that equal to item and then find and we want to pass it the id that we received in our route so we're saying find this item by the id now there's a couple different ways that you can do this you could use find you could use find or fail i kind of like doing it this way because it allows me to specify what i want to happen if this item isn't found if you want to use the default level setup with the finder fail that's fine as well this is just the way that i've kind of grown accustomed to doing it so i'm going to say if and we're going to say existing item so if there's an existing item i want to do something what do i want to do i want to save that item so we're going to say existing item i want to see if this item was completed so we're going to say completed because that's the column we want to update so i want to set this completed property to true or false and to do that i need to grab some information out of my request i want to check for item and then completed now this is going to be true or false so i'm going to say whatever this value is is it true or is it false we're going to use our ternary operator and basically what we're saying is check if this is true if it's true set it to true otherwise set it to false and then the next thing i want to do is almost exactly the same so we're going to duplicate that and we're going to say completed at we're going to check the same request item so if this completed is set to true we want to update this completed at time stamp we want to give it a date and time so if this request item completed is true we want to set the date and time otherwise we want to set it to null in order to set the date and time laravel has carbon and we should be able to say carbon now and it'll grab right now the time stamp for right now but in order to use this we need to say that we're going to use it at the top of our file so let's go ahead and bring that in we'll use use illuminate slash support slash carbon and now we should be able to use carbon down here in our update function now that we have carbon and we're able to do the time stamp let's also do existing item save because we want to save it now and then we'll just return existing item now for some reason this doesn't work if no existing item is found i'm just going to do for right now i want to keep it easy sometimes i get pretty specific in these return values i'm just going to say item not found so if an item is found go ahead and do all this if no item is found the existing item doesn't exist we're just going to return item not found now that this function is created let's try it out in postman i'm going to create a new request this time we're going to use put and our url is going to be almost the same this time we want to pass in the id because we want to grab that id of one our first and only item in our to-do list so go ahead and we'll use api slash item because we've already created this item group and inside of it we're using the put and we want to grab the first item or item with the id of one the next thing i'm going to do is back in my headers i want to make sure i have content dash type and then application json we'll jump over to our body we're going to use raw again and let's send it some raw json we're going to do item that item is an object the item does have a name but we're not going to allow people to change the name at least not for this tutorial we just want to update whether or not the item's been completed so we're going to do completed and we're going to set it to true and then let's go ahead and send it and we can see that our id 1 name is take out the trash completed has been set to true and completed at now has a time so we stored the time that it was completed at we also set another return value so let's just send it an item that doesn't exist and hopefully we'll get that other return value back cool so we got item not found because there is no item 2 yet so our update is working let's move on and do our delete so we'll come down here to our last one this is our public function destroy we're going to do it very similarly to how we did our update i'm going to grab it the same way we'll say existing item we'll set it equal to item find we'll find it by id then we'll say if existing item so if you find an item by that id we want you to existing item and then delete the next thing we want to do is return items successfully deleted and if no item was found go ahead and return item not found cool let's jump back over to postman and see if we can delete that item i'm going to copy this url we're going to do a delete and we want to delete item one so let's send this over and we have item successfully deleted we come back over here to our get function and we run this again the first time we ran it we were able to receive this information let's see we're not expecting to get anything back this time since there's no items so let's send this again and we got an empty array because there's no items left we deleted the only item that there was at this point we should be ready and set up with our back end so i'm going to close out postman now that we know that it all works i can close out this controller let's go ahead and start our front end we're going to build out our view front end right now so to get started on that let's open up our terminal again alright the first thing i want to do is run npm install to install all of our package.json dependencies the next thing i want to do is install view npm install view this is larabelle eight it used to be done differently in laravel seven so i need to install view through npm all right now view is installed so i'm gonna clear this out and let's jump back over to vs code and we're going to create some of our views so down here in our resources we have js and i'm going to create a new folder in here and i'm just going to call it view because this is where i want to store all of my view files inside of my view folder i'm going to create a new file i'm just going to call it app.view we'll have template and inside of my template i'm just going to create a div and it's just going to say hello just for now and then div and then let's add our script tags and that should be good so we just have a basic skeleton of our app.view file now that we have our app.view file i want to go ahead and open up my app.js file now let's go ahead and import view from view and now that we imported view i want to tell it to use my app.view file so we'll do import app from view slash at and that should be good now let's go ahead and create a new view instance so we'll do const app equals new view and then we'll say l for element we want to set it to an id of app and then comma and then we're going to pass in our components and we want to pass it our app component that we just created so we'll say app that should be good for that now that we have our app.js file and we're pointing it to our app.view file we want to tell it inside of our php welcome blade to use this view instance that we just created so i'm going to open up my welcome blade and i should be able to delete all this we don't need any of this so let's just go ahead we're going to get rid of that let's go ahead and get rid of all of these divs we don't need any of them and i'm going to get rid of this and let's just go ahead and create our div id and we're going to set it to app that id that we just said we want to point our view instance to is going to go right here and then we'll just say app app and the next thing we want to do is now that we've created a div element with an id of app and we said we're going to put our view app right here let's go ahead and we need to import it so we're going to do script src equals we're going to use laravel mix for this so we'll say mix and we'll use js slash app.js we'll close that off and we'll add our script so what's happening here is we're using laravel mix which is our webpack mix right here and we're saying whenever a change happens we want to grab our resources which is right here our resources js and then app.js and we want to recompile it and then put it into public.js it's doing the same thing for us automatically if we're using our app.css file so by using laravel mix we're pointing it at the compiled version of our application so i should be able to save that if we open up our web browser we should see hello the only other thing we need to do is we're going to open up our terminal again now that we said we're going to use laravel mix and we want to recompile our assets whenever changes happen we have to use npm run hot and that's going to do hot reloads for us all right now we're watching our project folder let's open up chrome again and let's refresh our app and there we go we're now looking at our view instance now that we're all linked up let's go ahead and create our view components i'm going to open up vs code again i should be able to close out this welcome blade we'll get rid of this webpack mix and i'm going to close app.js for right now as well now i know from my to-do list i need a form component i want to be able to add new items to my list so i'm going to create a new file and i'm going to call it add item form dot view and i'm just going to create the general scaffolding so we'll do our template and we'll do our script and i'm just going to say div div and we'll just say this is the form i'll save this for right now i'm actually going to copy all this i just want to create the general files that i'm going to need i usually do this when i start a new project i have a basic idea of the layout so now that i have my add form component i want to create a list view to show all the items in my list so we'll just call it list view dot view and let's just paste that general template in here and we'll just say list view and i'll save that and the only other thing i want to do my list view is actually going to loop through each item in my list so i want to list item or item view so let's just add one more component and i'm just going to call it list item dot view and we'll put our general scaffolding in there and i'll just say list item we'll save that now that i have my basic file structure laid out let's go ahead and open up our app.view this is our entry point to our application right here let's set up how we want our to-do list to look inside of my root div i'm just going to create a class and we'll just call this to-do list container and this is just going to be the container that houses the entire list it's going to hold our ad form it's going to hold our list view and also all of our list items so this is just our to-do list container and then inside of our container let's go ahead we'll put another div in here and this is going to be our heading so the top of our list we'll just say class and we'll call it heading let's go ahead and close that out as well inside of my heading i want to put a title so i'm just going to use an h2 i'll call it id we'll set it equal to title and i just want to call this to do list and that's just going to be my title at the top of the page the next thing i'm going to do inside of my title right underneath the to-do list i want my form so people can add new items to the list before i can add my form component because that's going to be right here i have to import it so let's jump down here to our script and we'll say import add item form to bring it in and then we'll say from add item form the next thing we want to do is make sure that we add it into our components and we can say add item form all right and now we should be able to use it up here so we'll just say add dash item dash form and just put a slash and end that off so now we have our to-do list container inside of our container we have our heading and then inside of our heading we have a title and then we're including our add form inside of the header as well the next thing i want to do is after our heading i want to have my list i want to list out all the items after the heading we created this list view right here and we're just going to import that so we'll say import list view from list view and then let's add it down here as well so now we should be able to jump over here and we can say list dash view now that we have some elements on our page let's go ahead and add some styling so we'll do style scoped the first thing we have is our to-do list and that's a class so we'll say to do list container i'm just going to give it a width of 350 pixels and we'll do margin auto so it should center it the next thing we have is our heading so let's give our heading some style so we'll do dot heading let's set a background so we'll do background and we'll set that equal to i'm just going to use a light gray so e6 e6 e6 let's give it some padding as well we'll just do 10 picks and what else do we have up here we have our to-do list heading title let's go ahead and give our title some styling so that's an id so we'll say title let's just say text dash align and we want to center it so center our title inside of our heading let's take a look at that let's see how that looks we'll open up chrome again and cool so we have our to-do list our form and our list view along with a little bit of styling i'm going to zoom in so you guys can see this better now that we have our basic layout let's go create this form component we'll jump back over to vs code open up our add item form so we can get rid of this form word we just wanted that to set things up for our form containing div i'm going to say let's just create a class and we'll call this add item because this is going to be our add item form inside of our add item form we're going to need an input it'll be of type text and let's just close that off for right now and we're also going to want a button so when the person types in their text they're going to click a button and that button will be the add button so before we get too far along let's go ahead and import some icons that we can use for that button i'm going to use font awesome for this so let's open up chrome again pull up a new tab and we'll do view font awesome icons and i'm just going to click on github project for installation we want to install the core package and icon content so we're going to run both of these and let's just open up a new tab make sure you're in your project folder and we'll just paste that in there all right and let's open up chrome again we want to do the next one in the list as well we'll paste that in all right we'll get back over to chrome and follow the rest of the directions and they're saying for using view 2x which is what we're using we want to use this command right here and we're just going to follow their usage down here for usage recommended we want to import our library our from font awesome font awesome svg core we want to import our specific icon that we're going to use in this example they're using fa user secret and then from the font awesome pre-solid svg icons and then import font awesome as well and they're telling us to set it up with library ad the icon that we're importing right here and then we're creating this view component font awesome font awesome icon i'm just going to copy this right here and let's open up our vs code again and this is going to go in our app.js file let's go ahead we'll bump that up we'll paste that in there they use the fa user secret i want to use a different icon i know that vue has a fa plus square icon so i want to import that and i'm probably going to want to use a trash can icon later on when we want to delete any items in our list so let's do fa trash so we can use both of those icons now we just want to change our library ad from fa user secret to fa plus square and fa trash and that should be good i'm going to save that we're going to go back over to our add item form and let's see if we can use these icons inside of our add item view form right after our input let's go ahead and we have a font awesome dash icon and let's jump down on the next line do icon equals and we want the plus dash square and we'll just close that off as well we're going to come back and add some click methods but let's just make sure this is working we'll jump back over to chrome we'll go to our laravel project and now we have this plus square right here so our icon is working so let's close this tab go back over to our vs code let's give this some style let's make our form look like something at the very bottom we'll say style scoped and we have our class add item so let's do add item we'll say display flex let's do justify content center let's also do align items center so we have our add item our add item let's stylize this input a little bit so we'll just say input and let's give our input some style we'll do background is we'll go with f7 f7 f7 let's remove the border we'll do border zero i don't want any outline on focus so let's do outline none let's add some padding and we'll just do five pixels on this i also want to add a little margin so that there's some breathing space between our input and our plus icon button so we'll just put 10 pixels between them and let's just say with 100 that way it fills up the entire available space let's save that let's go ahead and link this input to some data down here so we'll do data function we're going to return and we said we'll have item and that item will contain an object that object will have a name so we'll just set that to blank by default and then we're going to use v dash model and we're going to link this input to our item name so we can just do item dot name so now that the input is linked to some actual data i want to change the color of this font awesome icon based on text being provided inside of our item name so if there's no text provided i just want to gray it out i want it to look like you can't click on it and then once some text is provided i want to change the color so the button looks more clickable so let's just do we're going to use some class binding so we'll do class equals we'll put that in an array and i want to check for the item name so if there's an item name if the item name is provided i want to use the active class otherwise i want to use inactive so i still have to create these and then by default i'm just going to create a class and we'll call it plus or the plus icon so whether or not it's inactive or not we're always going to use the plus but if anybody provides an item name we're going to toggle between active and inactive so let's create those down here in our style so after input let's create our default class of plus we'll just say font dash size and let's just give it a size of 20 pixels and then also we got to create our dot active for active i just want to change the color so for an active color i'll use 0 0 ce25 so it's like a greenish color so that should be good and then for inactive i want to kind of gray it out so in active and we'll use color 999 999 and that'll give us this grayish color so we're all linked up now i'm going to save that and let's just see what it looks like inside of chrome so we have our to-do list we change the styling of our input and right now our button is grayed out let's see if we type cool so if we add some text it's going to change the color of our icon it's exactly what we wanted there's no text our icon changes we'll go back over to vs code and let's put a click in here so we'll do at click we're going to set it to we didn't create a method yet but we will in a moment so we'll just call it add item so whenever you click on our font awesome icon we want you to execute this method right here so let's create that method after our data we'll put a comma and we'll say methods and we call this method add item now without getting too fancy with form validation i'm just going to say if this dot item dot name is equal to nothing i just want to return so if there's no data provided stop what you're doing and don't execute the rest of this function but if there is data provided we're going to use axios dot post and we should have api item slash store and we want to pass it some data for this we just want to pass it item and then we'll say this dot item so whatever the item is right here if there's a name provided we want to send that over and we're calling it item and then we want to do something with it so we'll say then and we'll do response we'll use our arrow functions and let's scroll up when we receive our response we'll do if response dot status equals 201 because that's a successful creation we want to reset the item name so we'll do this item dot name and we'll just set it to blank i just paused the video i wanted to point this out now but i do end up fixing this later on down the road you only want to use a single equal sign right here not a double equal sign and if there's an error let's just say catch error we'll use our arrow function and we'll just do console.log error and you can handle this any way you want i'm just doing this in case we get an error i'm going to save this and let's see if we're able to add a new item to our list we'll go back over to chrome so i'm going to open up developer tools i'm on the network tab and let's create a new item i'm just going to call it take out the trash and when i click the plus button we're expecting to see some network activity down here so let's click plus and we hit our api item store we have a status of 201 so that was a success let's click on that so our api is working we just created our first item we have an id of one and we returned the data for that item so it looks like everything's working just as we wanted let's go ahead and create this list view right here so we can see these items as we create them i'm going to open up vs code again i'm going to close app.js and let's open up our list view for my list view i want to receive my list of items as a prop so i'm going to say props and we'll pass it items so our items is going to come from our app.view file and we're going to write that in a second the other thing i want to do is i want to import my list item and i'm going to loop through it up here so let's say import list item from and we'll do list item we have to make sure we include it down here in our components and we can just do list item so we're anticipating a list of items let's create a v4 so we'll do div v4 item in items and i want to give this an index so we'll do item comma index and let's give this a key and set it to the index so now we have our v4 we're going to loop through this list of items that we're receiving and we provided a key index since we imported our list item we'll do list dash item inside of our list item i want to pass it a prop of item and this is going to be the item right here that we're receiving so we should be able to say item item and let's also give it some style we'll just do class and we'll just call it item we can close that off and let's jump down here and let's do our style and let's give our item some style so we'll do dot item let's give it a background to match our title so we'll do e6 e6 e6 let's give it some padding we'll just do 5 pixels and we'll say margin top to give it some space in between each item and we'll just do 5 pixels save that and i think that should be good for right now so we're receiving these items we're looping through those items up here and we're passing each individual item to this list item and we haven't created our list item down here but we're going to do that in a second before we create our list item we need to grab all the items from our database and pass it to this prop right here so let's do that we're going to open up our app.view after our components i'm going to go ahead and create some data so we'll do data function and we'll return and i want to create a property called items and we're going to grab the items from our database and we're going to put it right here inside of our items property so let's create a method we'll do methods and we'll just call it get list our get list method is going to use axios and a get request and it's going to hit api items then we want to do something with our response so we'll use an arrow function and we want to set the items so this dot items equal to our response dot data so whatever data we receive in our response we're hoping to receive a list of items go ahead and put it in this items make sure you spell items right then we'll do a catch and this is just going to be an error if there's an error just console dot log the error so now we have our get list method but we're not executing it anywhere in our scripts outside of our methods vue has the options api and we should be able to hit a life cycle event called created when this component is created i want to run my get list method so we'll do this dot get list the last thing we want to do is we want to attach these items to a prop in our list view so let's do items and set it equal to our items so we'll command s to save that so we're basically saying pass a prop or a property called items with the items that we're storing right here into our list view and we're saying right here we're expecting a prop called items so let's jump back over to chrome and see if we have an item when we save that our hot reload recreated our instance and since we have created executing the get list method it actually grabbed our first item but we haven't built our list item yet let's go ahead and link that up right now so that we'll see some data in here back over to vs code this time we're going to go to list item now we said earlier our list item is going to receive a prop so let's go ahead and do props and receive that item we can get rid of this text right here of list item let's create a class for our individual item and i'm just going to call it item i know that each item in the list i want to have a check box so you can check it off if you've completed it or uncheck it if you haven't completed it so the first thing i'm going to do in my list item is i want to create a checkbox so we'll say input we'll do type equals checkbox and when this checkbox changes i want to execute a method we haven't created the method yet but i just want to acknowledge that at change we want to execute a method i'm just going to call it update check i also want to attach this input checkbox to the item.completed property so let's do a v model and set it equal to item dot completed so when this prop of item is received it has some properties inside of it one of those properties is going to be completed we set it up earlier and it will either be true or false so i want to link that to our v model right here i think that should be good for this the next thing we want to do is we want to actually display the item name so we'll use the mustache tags and we'll say item.name i'm just going to put this inside of a span so we'll do span and span now depending on the completed status i want to change the look of the item name i want to actually put a slash through it so let's give this some class binding we'll say class and we'll pass it an array i want to check for item dot completed and if it's completed we haven't created these classes yet or these styles but we will in a moment so if the item's completed i want to apply a class called completed if it's not completed i don't need to do anything but by default i want to set some just general text property so i'm just going to call this item text so if it's completed apply the completed class if it's not completed you don't have to do anything and then by default we're just going to have an item.text let's create those real quick we'll do style we have completed let's give that some style we're going to do text decoration and we want to just do line dash through so if it's completed put a line through the entire text name the other thing we want to do is we want to kind of like gray it out so it looks like it no longer needs to be done and i'm just going to use 99999 and that should be like a grayish color we also have item text so let's create that we'll do item text and this is just the default text for the item i'm going to set the width to a hundred percent so fill up whatever available width there is and also do a margin to the left so it's not right on top of our check box we'll just do 20 pixels and while we're at it let's also create this item class we'll put it in right here we'll do item we'll do display flex we'll also do justify content center and we'll do align items center and let's save that let me move this back out and the last thing i want to do is i want to create a button and i want that button to be a little trash can so when a user clicks on it it'll delete whatever that specific item is in our list let's go ahead and add our click and we didn't create this function yet but we'll just call it remove item and let's give this button some style we'll just do class and we'll set it equal to trash can and let's import that trashcan icon we should be able to do font dash awesome dash icon and set the icon equal to trash let's give this trash can some style we'll go down here right after our item and we'll just do trash can and let's give it some style i'm going to set the background to the same as the background of our list so it should just be e6 e6 e6 and then i want to give it a border of none let's give it a color of red don't click this unless you really want it gone and we'll do outline none that way it doesn't show a focus outline on it we'll do command s to save we should be able to jump back over to chrome and see what this looks like so we have our take out the trash now it auto reloaded for us because we're using that hot reload that's why we see this already but we have our check box if i check it i'm expecting it to change the style of our take out the trash now we got an error down here because we haven't created this update check function so let's go ahead and create that update check function and let's also do our trash can function back over to vs code so right after props we'll do a comma we'll do methods and let's do our update check and inside of our update check function we're going to use axios.put because we created that put route earlier and we'll do api item slash and we want to append the this item.id from our prop that we're receiving right here so it should put the id of the item we want to update and then let's pass it some information we're just going to pass it the entire item so we'll do item this dot item and then after that let's do something with the response so we'll say then response we'll use our arrow function we'll say if response dot status equals 200 so if it's successful let's emit a change let's tell our parent component that this item changed so we'll do this dot emit and then item changed we haven't created this event yet of item change but we're going to do that in a minute so let's also do a catch and we'll do error we'll do an arrow function and we'll just do dot log error we'll save that and let's do this item changed event our parent to the list item is our list view so let's go back to our list view and let's add an event listener so we'll do v dash on and we're listening for item changed and when this item is changed let's emit something to our app.view to let the app know something new happened go ahead and reload the list for us so let's set this equal to emit and we'll just call it reload list so if an item changes reload the list for us we'll save this and now we have to create another event listener on our app dot view to listen for this reload list event so let's go back to our app dot view and right here i'm going to tab this down on the next line and after our items items we'll do v dash on and we want to listen for reload list and we're going to set it equal to so if this reload list event happens we want to get lists we want to get the new list so our child component saying hey reload the list for me because something new happened down here on a really large application you would probably use state to do this but since this is just a really small to-do list we're just going to use the emit events so we'll just save that and our application probably already reloaded in chrome so let's go over there we'll click on take out the trash we're not getting any errors down here in our console let's click on network we see one and then items let me uncheck take out the trash one and then items so what's happening is this is our put request if we click on it we see headers and this is our request method put so it's telling our api backend go ahead and update this and then once that happens and the request comes back successful we're telling our parent components to go reload the list so it's automatically grabbing a whole new list every time we click this now that this is working let's make our trash can do something we'll go back over to vs code and we want to go back to our list item and we want to create this remove item method so right after our update check let's add a comma and create our remove item method now we already created our route for this and we should be able to use axios delete and we're going to hit the same route as above we'll do api slash item slash and then we just want to append this item id so we want to grab the id and we want to do a delete request with axios what do we want to do with the response let's say response we'll use our arrow function and we're going to do the same thing we did before so we'll say if response dot status equals 200 let's just emit an item changed event so we'll let our parent component know hey something changed you need to re-grab that list for us so we'll do this emit item changed and then lastly let's just put a catch down here we'll say catch error arrow function and just console.log and error if we have one command has to save that and let's jump back over to chrome and we should be able to click our trash can pretty cool so we were able to delete our item let's add it back we'll say take out the trash we'll click our plus button now you'll notice this time when we click the plus button it hit our store so we know it created this item for us but it didn't tell our parent component to go grab that list again so the item was created if i click the refresh we should see our item down here refresh so we have our take out the trash but let's tell our form to emit an item changed to our parent element so we'll go back over to vs code this time we're going to go to add item when we reset when we say that this response is successful right here let's do this dot emit and let's just say reload list now all we have to do is go back to our parent element after we save this we'll go back to our app dot view and we want to do the same thing as we did right here we're just going to copy this and we'll put it right here so we're listening for this on reload list event go ahead and get the list for us again so i'm going to save that so let's go ahead and add a new item to our list and it should automatically refresh down here we'll just say make a sandwich we'll click the plus it added it to our list but we didn't delete it right here let's just double check that vs code and right here i put a double equals that is incorrect make sure you fix that guys remove that double equals save it we'll go back over to chrome let's try this again we'll just do clean the kitchen click our plus sign and there we go so we're removing it from up here we're appending it to our list of items and we should be able to click and check these off if we want we can delete one so i think this is a good stopping point i'm going to delete these items and i'm going to create a few to-do list topics for you like this video let's add that subscribe now and hit the bell icon for notifications i hope you learned something in this video i'll be posting more with laravel and vue.js so stay tuned and i'll see in the next one you

Channel: Scrypster

Views: 206,192

Keywords: Todo list, To-do List, To do list, Todo list App, To do list app, Laravel todo list, Laravel to-do app, Vue.js Todo list, Vue to do list

Id: UHSipe7pSac

Length: 60min 16sec (3616 seconds)

Published: Fri Nov 20 2020