Vue JS CRUD - Complete vue crud using laravel api from scratch tutorial | Vue CRUD operation | Vue 3

hey guys welcome back so guys in this video we are going to learn how to make a crude application in vue.js application okay so we will be using an API to create this crud application so guys we have already worked with the rest API in laravel and now guys let's install our vue.js application and start building the crud using this API okay so guys now let's get started so first let's go to this docs on this Quick Start okay and here you will find the create View application so let's click here and here is a method to install okay so guys before that make sure you have your node and npm installed in your system and which should match to some criteria okay so here it says that it should be above 16 version so now let's let us get started so first go to your any folder so I have choose my One Fund of BYT folder here and now I am going to create a folder with the name view crud okay view Cloud so this will be my project name and I am going to open this project name with the vs code editor okay so now guys let's get started so first let's move to our terminal and open the terminal new terminal and now let's get back to our documentation and here you just copy this and paste so paste it hit enter and it starts the installation okay let me just keep it full width so now guys here you see it's asking for the project name now so I have already the project name called as viewcred so I'm not going to type any of the name I'm just going to give Dot and hit enter okay so it will create in this application so package name so package name means what project you are going to build okay so it's like I'm going to work on view crud so I'll give you crud only crud crud hit enter so do you want typescript no jsx no and add view router for the single page application if you want you can add it we are going to create a current application like show read edit so we require a route to Route the pages so let's give enter yes and here not required and why test for unit testing not required currently and add end testing solution not required no eslint no and here it starts perfect so guys you see that it's under via view crud you have the application installed and now let us run this npm install to install the package let's type npm install hit enter so you can start seeing that guys the node modules folder is visible over here which is installing the npm node modules okay so guys you see that our npm installation was successful and everything is installed so now guys you can see here npm run Dev to run the application so before that you can see that vs code gives the extension what extension we need to use so let me click over there and here you see that it recommends us use view Waller and other also so I have already installed that so it's not required let's delete this folder press delete and move to recycle bin so now guys let's um run this application so just type npm run Dev hit enter and here you see guys that your application is application is starting perfect and it is started on this port so let's copy this right click and just get back to your browser and paste here perfect so guys you can see that our application is running fine and let me just come back to our SRC here you go to views here you see view okay home view let me type here some content H1 welcome to Funda of web it save just Ctrl s and get back and here you see guys welcome to fund of webrt all set guys so our application is running fine so now guys so first step let's go in this app View and just check for unwanted things and remove it so here you see guys we do not require you did it and this logos so let's remove all The Unwanted codes here okay and we do not need any of the CSS let's move below and remove those things completely and then guys you go on to your home page so here also we have some codes let's remove this not required and insert that type in H1 this is home page and we do not require this setup right now and same condition goes with your about us page let's take it we do not require the CSS just this is about as page done and we have some components in this just ignore this or else you can delete and use for your components so we are not going to mingle with that we are going to work under a route views and app okay all set so now guys I just want to get back okay so now guys let's get back and see the output right now so here you see the different view is there still why because we are having some CSS in the main CSS file so we'll just remove that completely remove it we do not require any of the CSS here and in your base dot CSS also we find some CSS code so we do not require from this body just remove it and these are the basic things we can keep it not an issue now we can close the main.css and base dot CSS and now if you see you have this clean page so now guys for the user interface I am going to use get bootstrap so now guys let's move below and here we'll see how to install this so here is a code or else you can move below and still you will get npm install let's copy this click to copy and get back and just install it your bootstrap so let me open the new terminal and paste here hit enter to install the bootstrap package so installation started guys okay so bootstrap is installed guys and now you can find that bootstrap in your node module okay done so here you find that bootstrap so let's import it guys so you can just go to your main.css file and as you have imported this the same we are going to import the bootstrap so what we need to do just type bootstrap okay boot strap so it will include its CSS let's get back to this main so we can find what's going on and now let's close this main.css so now guys you can get back and here you will see the difference it's coming like a bootstrap okay bootstrap fonts are loaded so now let's go back to the docs on the bootstrap search for the navbar hit enter and here navbar comes let's copy this first nav bar and get back to your app view okay so here you can paste it as simple and installed of H tag I mean a tag you can use this routers router link okay so get back to your nav bar here and wherever if you find a a tag just use a route link okay just use route link router link and wherever you find href just replace with 2 and go back to home and you can remove it and then again you will find here let me remove unwanted URLs which we don't require here tags all set so on this page make this to href to 2. and it will go on home slash and this will be a router link so r o u t e r l i n k link okay as simple now you can copy this paste here for the about let's not make active and here about will be there and this is going to about as page and then finally we are going for the student route so student okay students and here create a URL with the students okay done and below this number only let me minimize it so here you'll find your route router view okay so this is your wrapper header and below that only you have your router view so inside this router view what happens you it will call this router index Dot JS file and here is your routers okay so what you need to do here you find your home and here you find your about so next what you have to find for the student okay so what we'll do let's copy this anyone okay so here we are paste and call let's end with comma and remove this last comma and call the path as students it will call that and here you set as students and here the component you are going to create okay so let's tell student View let's copy this and get back on the top of the page here import student view from the path okay so from where you have don't have a component yet so what you'll do we'll just go one step back and inside the view let's create one folder with the name students okay hit enter and inside that students will create a file with the name View Dot View okay or index you can call it no not a problem let me keep it as view this okay so view student it will be much Clear hit enter so now you have the path of your component let's go one step back and move inside the views folder and then you go inside the student folder students forward slash and then you call your view Dot View file okay and now you get back here and as simple let's include the template guys so copy this and get back to your student view and here this is student page okay so now let's get back so here is our application perfect so you can see guys that navbar has home page here if you click about it comes to about student student perfect okay so nav if you want to design the bootstrap I mean never a little bit you can just get back to your app View and here you can use it instead of BG dark and here you can tell Ms Auto MS Auto and if you are using a busy dark navbar BG dark okay let's save and you'll find that the navbar background is dark and here it comes okay all set so now guys uh let me just remove this fluid done guys so guys in this video that's it and now guys let's continue the next video with on the student page we are going to fetch all the students list from this API okay so now guys in this we are going to start with fetch the students record using API in view JS okay so guys now let's get started so first let's move to this route on the students on this page that is this is student page let me open the application so now guys you can just go on this route index.js which is you can see the path that is students and it's go to the component called student view which is imported at the top of the page so here you see views student and view Dot View okay so you can just go to that path so I'm already here and this is the output guys which is this is student page okay so now let us begin with designing the user interface we have already integrated the bootstrap okay so now we can start with open and close div a simple card then card header then H4 tag and call that heading as student and inside this I want a a tag so instead of a tag we need to use a router link and close this and then you can tell add student add a 2 that is href and you can tell like student slash create okay and then guys you can add a class also so just add a class which is button button primary let me break it down so here we break and this button will be floating to the end so just move float and and now guys you can start with the card body so inside this card hyphen body start with the table dot table and then add a table border okay table head then th that is stable heading and here we add ID and other field names so let me just show you the API so here is my API guys that is ID name course email phone so just I want to show all these columns so let's get back then name course email phone and one created at also when this student was created and a simple action button guys okay all set so these These are the fields and now here comes your table body T body and your table row and inside this table row only we are going to loop our data so before that we need to get the data right so for that let's come below and here you need to set up the script tag so let's set up the script done and now here you type export default open and close calibrase where and now you can tell that the page name as students give comma start with the data function open and close calibrase return it so then let's create one variable called students colon array then and now let's create the mounted function so when the page loads at that time you have to check okay so there will be a mounted function and now insert this mounted function I want to console log so let's and log that I I am here so let's save and now you can get back and just refresh and see in the console log so you need to inspect okay so let's move to that console so here we go and here you see guys that the I am here you hear you are viewing that mounted Let me refresh once again and you will find that I am here but you are getting These Warnings These Warnings are nothing but the router is not created right so for that you are getting this warning so once we create it will go so now guys let's Where We Are so on this mounted when when the page is loaded that time we need to call the data from the API so this API we have to call it so for that guys you need one Ajax or axios or any other HTTP call so we are going to use axios for the HTTP call okay so now guys um yes let's check in our package do we have that so just go to your package.json and we see that we don't have it here in this so we need to install it let me open a new terminal and just do npm install s okay and hit enter so your axios package will be installed in your videos application okay so guys you can see that we have successfully installed our axios and here you find that the actual install in your package.json now let's close it and yep we are back here so just save and now guys let us use the axio so what we have to do um let's use this in a method so use a method here colon open and close curly brace and inside this method I am going to create one function get students open and close function and then you are going to call for the axios so just axios dot get method and then dot then function and open and close the calibrates hit enter so before this opening you have to pass the response okay so get that response and now guys to use this actually use we have to import the axios so let's get back on the top of the export default import access from axials okay and now we can get back now you are able to use this axios so now guys you need to call your URL so either you use in single quotes or just use a tilde symbol in that get method okay now we can get back and this is My URL API guys okay get back and paste here so this is my complete API and we get the response here let me console log console.log here you get the response and call this function inside your mounted function okay mounted part so I'm going to this dot get students okay save it so when the page loads this mounted calls is a get students function and get student function does the actual call so now we can save it let's get back and then here you see we get let me Zoom it so here you see that this dot get student is not a function why let us just check out function name is correct but I have made a mistake here it is not method it's a methods okay you have to add s over here and now you can get back refresh so make sure you save this file guys and then refresh and check the output so here you see guys that data has come perfect so on this data you see that status 200 and you have three data in this API okay so I can show you here which is three items over here okay inside the students so here is the students now what we have to do guys we have to Loop this data inside our table so let's get back and now we have already created the variable called students so let us copy that and just use this this dot students and equal to res dot data and inside data you have students okay so we need to take that res dot data Dot s to dance all set we need to console log this part okay I mean these dot students let's save and get back refresh so perfect so here you see that only students data has loaded it now guys let us Loop this data in our HTML table let's get back now we can comment this we do not require so yep let's get back on the TR we need to use the for Loop okay where inside that I will get this this students the data function variable and we are going to make it n the variable called student or item okay and here I need an index so this index we are going to generate as key colon key so if you don't provide this key you will be getting a warning so we we want to skip the warning so we need to add it all done and now guys you can add a table data TD okay open and close curly brace where you will copy the student dot ID then name email phone and other things like name course okay we missed that course let's add that course also so make sure the spellings are correct as the API given and here we add it now we need one created at let's copy and paste until created underscore at and then one action button we require it so I'm going to remove this and here we need to use a route link okay a router link as we have used for add student so same way you are going to copy this and paste here all set so now I am going to remove this for now because we'll be getting warning okay so this will be delete and this is going to be edit Adit edit okay and here you can set the edit as success and we need to copy this class here paste it and make this as Danger and here type equal to button let's save it and remove this float and guys we do not require here float end let me break it down so it looks more clear and now guys I just want to add one container because this is looking at two width so you can just add a container class in this main div so container all set let's save it and now we can get back perfect so guys you can see that we have successfully fetched the data using API in view.js so now guys if you refresh and here you see there is some delay so we don't know what's happening over there so for that we need to add some condition like it is loading or what's going on we don't know that so for that let us get back and in this tea body I just want to add a if else condition okay so just I use V if where this Dot students dot l e n g t h length which is greater than 0 then show this table data else what we need to do let's use this TD again and paste here again and instead of if let's make it to else part and remove this and here you come with your TR tag and then TD tag add call span here call span equals to double quotes where how many columns so one two three four five six a seven so total number of call span that will be 7 and here you can just add it is loading okay and keep dot dot dot save it and if you refresh you'll be noticing that it is telling loading so once loaded your data will be appended perfect so here you see guys so now guys we have successfully seen that how to fetch the data using API in view JS okay so now guys let's continue next video by creating the page of add student and inserting the data into our database using API in and now in this video we are going to start with how to insert the record into our database using API okay so guys here is my database where and here is the API okay so the list of API I just want to show you so let me just show it so Guys these are the apis where we saw for the fetch of student and we want to insert the student then we have to use this route to store the record so now guys let's get back to our Google Chrome at this view so on this route we just want to go to this route create student slash create on this route we have to create a page so for that you can get back to your vojs as simple let's go to Route index.js so now guys let's move below here you see that how we have created this path so same way you can just copy and paste let me copy paste it and here let's tell forward slash create okay create so now guys you can paste this again here student create the component name starts with the capital and now let's import so paste it let me copy and paste here let's Ctrl X and paste the name as component over here and now we are going to create a file inside the following path as create view okay so let's copy and go inside the view student and inside that file folder let's create a file with the create Dot View perfect so now guys you need to start with the template then design the container container margin top 5 card the card header as add students card body margin bottom three and insert this add a label name create an input tag with the class name form hyphen control and let's end this so let's copy and paste guys four times paste again paste again paste okay so there are four columns totally as we see on in our API here so name Course phone and email okay and here we mention that course email phone then a simple button guys to submit the data you remove the label and remove this input let's make a button hit enter and add a class for this button button hyphen primary and then button all set guys let's save it and let us save this file also index.js and now guys let us get back and see the output yep let's move here you go student slash create and you see the form code so the form is ready guys and now what we want to do um let's take the record and save into our database this database using the API okay so guys let's get back add a script tag script script here is one View and now guys you can give a name colon in single quotes this will be the student create okay and then we are going to get all the input Fields details first okay so for that what we'll do create a data function open and close curly brace your end with comma and then guys you need to return then you have to add a model so model colon open and close curly brace and inside this I want a student variable so student colon open and close curly brace and what are the fields we have to get so for that you can just go back here on the API name e-course email phone so you can get back Name colon null then email climbing course and then phone okay and now what we have to do to manage your input data you need to Define inside this okay so whatever you type inside your input it should come and store inside this variable okay so for that we need to add a v hyphen model in your input tags so here we hyphen model equal to here your variable goes so inside your data function whatever method you call so as you see here model student and then student name okay so let's get back model dot student dot name okay let's copy this and paste here paste again and paste again here all set so this will be the course then email and then phone so our input box are managed and all the details will be stored here inside the student variable so let me just show you guys how this input details are getting stored here so for that you can just get back on your Google Chrome and guys you just need to install one view Dev tool so I have already installed that extension in your Google Chrome okay so this is my the first let us refresh and so here we get back on this component student create and inside the model you see that student is an object and here there is no data so now if I type the name as with prakash here it will update the data perfect so as you see here we are getting the data course MCA or BCA so just type so you have BCA and then email whatever you put you save your data in this student variable with the help of V model OKAY V model does the pushing part now guys you can continue back so yep let's get back so now when we successfully fill all the input details we click on the button so at click double quotes here you call your save student function save student now we can copy this and get back so where do you create the function okay so we create the function in the methods open and close calibrase and then a simple you create a function with this name you have to call your access so you can manage your saving of data okay axios dot post method dot then function response of open and close curly brace here you find in this way let me break this down and now guys inside this post method you have to follow up the API URL so let's get back copy this and paste here so this URL this API URL we are already using a post method also okay so this is my post and same this word get also so do not get confused let's get back and here guys after this inside this post method itself you have to pass this dot model dot student okay so inside the model you are calling all this complete object that is to that you are sending inside the API okay as a post request so now guys here once the data is saved you can just console log whatever the response you get from there alert response dot data dot whatever the message or status you have given in the API so let me show you what response for the message we have set let's go on the store function inside the API so here is my store function so on the success I have set the response that is message as student added successfully so we should get this response and this is the 200 okay let's get back to our view and here you paste and now guys here also you can add response.data so it gives only that status and message and now guys you can just empty the input Fields let me copy this and paste here add this Dot paste it and instead of colon remove and paste equal to and here it is not directly installed it is inside the model so you have to go this Dot model.student and equals to that object data you have to make it null once the data is saved and now guys what about the errors like input validations so when you insert the record for first but you skip the course and email and phone you have entered now if you save you need to get all the validation error right so for that you can catch inside your catch statement of your axios okay so as simple dot catch catch function type the function of whatever the response you get inside this catch so are simple let us use a if condition error Dot response and there are many responses guys so let me just show you on the Google Chrome axios okay so just search for Access or just go to this URL and here you see guys that is the actual post request how you have to use it and now I just wanted inside the cache function and handle the errors so for that you can just go to your handling errors over there and here you see all the detailed view is given so let's copy this and get back to our view JS and paste here we don't require many things let me just remove those things just remove and now guys here we are getting the response we'll check and here let us copy the status part okay error.response dot status if it is double equal to 422 okay so this means input validation error so let me just show you in the laravel API what I have developed here you will find that when its validation is failed so that time it goes to 422 so here I am setting that 422 that we can catch in this view Js perfect okay so now you need to push the errors this dot error list equal to this part error.response dot data inside that data we need some other messages that is errors so from where is this errors are coming so these errors are coming from this part okay so here I have given that so you need to copy this and you paste as per your API so guys now the condition comes over here like this will not work in the cat statement so what we have to do let's create a variable variable dollar this equal to this okay now you can copy this or you can create some other variable also like my this you can copy it and paste here so my days of error list you are pushing all the errors inside this and now where this error list should be defined in your data function so you need to Define that let me add here in the data function and it should be null at the beginning okay so either you specify null or just add single quotes and leave it not a problem so now guys let us validate this error also I mean we need to show this error so what we can do let's get back on the top of the page and insert the card body itself we are going to Loop the errors you will align Li tag and here you need to use V hyphen f object dot Keys function dot lingth greater than zero then you have to this dot error list so when the error is available that time you are going to Loop it so here we will show so before that is the V4 now this Dot error list open and close bracket in here err or or error and you pass the index also so we can give a key here so it will not give a warning so we just need to paste your index and this error of zero so we'll be printing that all set and for Designing guys let us use the bootstrap classes margin bottom zero and margins.3 and here ADD alert class alert alert warning save it as simple and now guys let us see okay let us test it so let's save and once let us check whether everything looks fine okay this is also correct and here all the conditions are done now we can get back yep let us begin with testing go to your console log first guys so we don't find any errors so these are warnings we can clear out and now I am going to click on save button so axios is not defined let's get back copy this actions and import actions from axrios save it again now let's refresh and now guys let us click here save so here we get the feed name field is required the course field is required email is required and fulfilled is required perfect so we are getting the validation errors okay so it took some time so for that guys you just need to add it is loading or saving you need to change the condition over here when you click on this so until you get the response okay so now guys let us fill only two Fields so with prakash new and here BCA and now I am going to click on Save so let's see what happens here you see guys email and phone field is required so you need to add all the inputs so with prakash new at gmail.com your random digit phone number and now let's save here if you save perfect so you get the response also in the console log and here you got a alert student added successfully okay and all the inputs are cleared but are error list did not get cleared when it is saved so let us clear that also once it is saved we need to this dot error list equals to null that's it guys perfect and now guys let us get back on the student so here you see that fourth record will be added cool so here you see guys with prakash new is added and now let me show you in the database so right now three records so here you see the fourth record also has been added all done and now let us click on this add student here once again and you see the page is not loaded why because the route is missed so let's get back to the view.js on index.js file let me show you here you see that it is students slash create and go to your view on this router add student here it is student so make it to students let's save it and now get back and let's go on students okay and now I'll click on ADD student here you get add student form perfect so guys we have successfully learned how to insert the data using API in view.js okay so guys let's continue the next video how to edit this record and update the record in so guys now in this video we are going to learn how to edit and update the data using API in view.js so guys now let's get started so as we have created the add student form same way we are going to create a edit student form okay so which will be copying this exact form and pasting it so let's move back to our application and yep guys here you can see that create Dot View so same way I am going to copy and paste and rename as edit Dot View okay perfect so file has been created guys and let me just change this heading to edit student okay go back to this student page I mean on this edit button okay so let's go to that edit button so here is my student review and yep and here is the edit buttons tell as students forward slash the ID and then forward slash the edit okay and here we have to concatenate the ID that is student ID okay so how can we concatenate here so one method is there you can add a colon here and just use this in a curly brace so open and close calibration where we will tell this path colon and inside single quotes you can just mention this student and here you can add that I mean concatenated student ID in single quotes you can forward this edit let me let's save it and now let us get back to our front end when you refresh and click on edit button so I'm going to click on id2 and here we click edit and you find that student id2 and then edit okay so make sure you are having the API also related to this URL so now let me just show you we already have that much okay so if I just paste here API student slash two slash edit the second record is going to display so here you see that second record has come over here as I have created the API so let me just show you how that APA route is so here is my route for edit the data okay so if you want to learn this how to create API in laravel please watch out the video that link given in the description okay so guys now let's get back as simple guys we have gone to this part enough let us get back to our View application and here we need to create a route according to this path as simple let's copy this path and go to your router index.js paste here and let us copy this and paste again and here you change this path copy this and paste here as simple and now guys at this place student.id we need to get a random IDs right so whatever ID we give so for that you can just add colon ID okay start this from the root students then your random ID by giving colon inside that and then edit URL okay as simple and then we will mention the name component name and here is a component which we are going to edit as student edit and now let us import this component guys so just import it import student edit from the component we have already created let me copy and paste here so it's not create it's edit Dot View which we have copied okay as simple and now once you go to this edit Dot View then you reach here all set now you can just refresh and see that form comes and now guys let us get the data from the API and display inside this input box so you can get back and as simple guys let's move below and first step we are going to change this name okay so this form name is going to be student edit and data and all all the input Fields it's going to be same because we are going to insert or edit the data right so all the things are going to be same so first step on the page load so when you edit this form when you click on that edit button and this page loads what we have to do we have to call a access call okay HTTP call so that part you can do under mounted or created so let us tell take it as mounted and on this mounted I want the ID to get okay so first we will tell console.log so here this dot dollar route Dot parents dot ID okay so this ID is nothing but from your index.js okay so where is it let me show you so this is the ID whatever name you gave here that part only should be called here okay so I am calling the ID which means that id2 should be present so let me inspect and show you in the console log let's go to console and if you refresh here you get that id2 okay so this is id2 let me put id1 here and you'll find that id1 will be printed in the console log perfect guys so guys let's use this ID and get the data as simple now you can comment this and just use one function get student data okay this is single data so we'll just mention student data function and inside this function I want to pass the ID so we have already check the ID we got it so we get this ID and now you can copy this function name and create in your methods let's remove just create a function name and here let us tell it is a student ID we are getting it and now guys you need to do HTTP call so we are going to use axios to get the data from the API then function so guys make sure if you are using axios you need to import at the Top If you don't have access please install the actions by giving npm install axios okay and now let's get back and continue here so my response and then here you get your success response so before that you need to call the URL so what was the API this is the API let's copy this and get back and paste here so now guys you need to mingle with this part here at this ID so we cannot use single quotes instead we are going to use a tilled symbol which is below the escape button okay and let's paste here so now we are going to remove this ID static ID and just add Dollar open and close curly brace and get this student ID so we got the student ID and it's done let me break this down so we can use here in a console.log we can see the response let's save and get back so refresh once so you got response guys here you can check in this data where you got the student record so now guys let us go and get that exact record response dot data Dot student and now you can refresh and you get only student data yep so you have got the result guys and this data we are going to paste inside the input box so you can get back here and we are already using V model that goes to model student and it's name okay so we have already in the data function so here is a path student dot name student dot course everything goes like that okay so let us copy this and just get back and here you can tell this dot model dot student dot name equal to here you get response.data dot student dot name okay so this is one way method of calling it so I can show you here when we refresh you get that data in your input box name okay perfect so here also it's loaded and here also it's seen guys this is one way of adding your details or you can do one more thing directly you can assign all the student record inside this student variable okay and now if you refresh here you see all the input field names are already stored so why it is getting stored because the response we are getting okay from the that column name name course it is same as my input field name so it is able to store correctly so guys if you don't have the column name specified correctly then you can just use dot name and Dot whatever you are assigning to it okay and now guys here if you don't find this ID so what in case if you don't find the ID I mean like you have number of 10 records but you don't have 11 record right so let me just add 11 ID and that time you may get error okay so you see that 404 not found that is the error because you don't find that ID in your database so guys to skip that you can just use this catch statement let me copy from Below here you copy and paste it let's face here if you want you can keep this or else you can remove all this remove and here guys you just need to mention four not four so when the message is four not four like you got this here right so it is 404 so at that time you will show this message so what message you are getting from your backend API let us just check that also so on this edit route okay on the edit function let us go there and here you see that we are getting a message okay which is no student ID founder so let's copy that and paste here so now let us show this in the alert message let's use alert function and paste that so whatever message you get you just pop up in the alert and ignore it so now guys you can save and let's test it refresh so you get get that no student ID font perfect so now guys again let us just get back on the ID number one so you have the ID with the data okay so now guys let us get back to update the data okay so this was about the fetching of data we have successfully done with that and now once we click on this update button so let us change this button name to update and instead of save student let us rename the function as update student now you can copy this update student function name and get back to your methods and there paste it update students are simple guys now you need to change the url okay that means API URL so my URL to update is let me get back to my API so here I am using a put method so and the URL is going to be same as we fetch the data okay so I can copy from Top here is my URL let me copy the same URL for updating it let's paste here as simple guys and here instead of post method we are going to type as put method because we are using the route aspect to update the data and now guys whatever we get the data in the input we are sending it here and then guys once it is saved you get the response and you can so log and alert and empty the all the fields but we don't need to empty the fields okay it's a edit part so let's remove that and error list we need to empty once the data is updated and guys this is a catch function to catch the errors like input error means you are going to show 422 so guys there are two things in this update part so let us go to the API okay so one is for the input validation all done once the input validation is successful you will get here and here you are seeing that find function so if the ID is not found then you are coming inside this else condition and showing the message so this is a four not four condition also so we need to add that condition to so here is my 422 for the input error and one more if condition for the 404 so let us paste here four not four and instead of displaying in the list we can just alert this alert and this is going to be a message okay because we are passing as a message not as error it's a message input fields are passed as errors okay so we both need to see that and now guys as we know this what is my this this is nothing but a variable which I have created and stored this into my this and then we are using that in the catch function to push all the errors list in a array variable okay error list variable so that's it for this update part so now guys let us just check out once and test it refresh and this is the id1 guys let me display all the IDS all the data so this is my total number of data on the API and here it is on the id1 it is with precaution let me update it to Varun govind okay and now let's update the email also to Varun gmail.com click on update okay student ID not so why the student ID is not found let's get back we are using the student ID so we have to declare it somewhere else so where we can use that in the data function okay so let's pass here student ID so in beginning it's going to be null and we are going to on this mounted this dot student ID equal to you get from your parameter URL URL patterns and paste that in the student ID so now you can follow this this dot student ID in your update function update student so now you can use it here this dot student ID which will be available so now guys let's get back and yep once again let's refresh and update the record okay it's loaded Warren govind so here you update Varun and let's click on update let's see what happens perfect so you got a message guys student updated successfully cool that's it and now guys you can refresh and you might see that the data is weren't going itself perfect so now guys let me just refresh this API and show you done guys so we have successfully done with how to edit and update the record in vue.js using API okay so guys now in this video we are going to learn how to delete this data using API okay so guys now let's get started so guys let's move to this user interface at the view student page so let's get back to our and here guys uh let me close everything and first we will move to router index.js so here we find it and this is a student view component so let's go to that component it's more top and here is a component and then the view file so you can go inside view student view so we use student and this is the view Dot View file so guys here we see that our heading and here is a table structure and this is a t body where we are looping the data and this is the delete button okay so on this delete button we are going to do the operation so as as simple let's use at click equal to insert double quotes we are going to tell delete student function and inside this function will be passing the student ID so let us just copy this copy and paste inside this function delete student so now guys you can copy this function and create a function in your methods so you can get below here and now let's paste it delete student open and close calibration so here we are getting the student ID from this function so just type student ID and yep guys first let us see that ID comes or not so you can just console log and paste here so now you can get back let's refresh once guys so now you can if you click here you'll see that ID number six comes and if I click on this ID number one then the one number comes here okay so ID has come so now guys let us just confirm and delete it okay so for that you can just use a if else condition here if so user confirm function and add a message are you sure you want to delete this data question mark if yes then print the student ID okay else you can ignore it now guys let us save and get back so refresh once so now I'm going to click on id1 are you sure it is asking if we cancel it doesn't give anything it just ignores if we give okay then your console log will be printed that is student ID okay all set so now guys let's do the axios call over here to delete the record from the API data okay so guys as simple access dot we are going to use delete method dot then function then you get the response here inside this open and close calibrase let's bring it down so now guys here what is the API URL okay so let me just show you what is the API given so here you see on the route we are using a delete method to delete the record okay so we can just copy this and get back to our axios and here till the symbol you are pasting your url okay so before that you have to call your domain URL so my domain URL you can go for that it's localhost 8000. which is from the API let us copy that get back paste it and here API slash student slash ID here in this ID just add dollar of ID that is student ID paste it all set so you get that ID and you send that ID and then you delete the data so let us just alert it so what response you get response dot data dot whatever the message you have given so for deleting I have a given a message and once you delete I want to refresh this whole div I mean whole data okay so once we delete I want to load this all the student data so for that you can use that the function name for the get which we are using on the mounted so you can just copy this when the page is loaded you are calling that get student when you delete it on the success of the delete you are calling the get student record again so guys now I just want to show you what comes if the ID is not found so let us check the API code over there so guys if you want to learn how to create a API in laravel please watch out the video link given in the description okay so guys now let's get back on student controller add delete method so here is my delete method and here guys I pass the ID and if the student is found then you are deleting the record and the message is given student deleted successfully okay if ID is not found then you are returning a 404 response okay so four not four response so you can catch this in a cat statement so now you can get back and here guys this data should be according to your API data okay so in my API it's message and now guys here we have to give the catch so let me just copy from the edit file let's copy this let me close it and paste here hit enter paste it so when response error of response comes and that error of response dot status is 404 okay that time you have to alert the message error.response dot data then your message this message is nothing but the API response which I am sending it okay so this is my Json data which I am sending so this message only I am printing in my view.js as simple guys so if that is not found that time you are going to show this message okay so now guys let us test this and complete the view.js card so refresh once guys before deleting it so now I am going to delete the row six and yes are you sure okay let's click here you see student deleted successfully let's click on OK and you will be noticing that student details are loaded again perfect so guys when I click on delete we don't notice that it is deleting or what happening so to skip that guys you can just add a loader like when you click on that it should be writing deleting or loading something like that and once it's deleted you can set back to delete okay so guys we are going to learn those things in separate video okay so guys we have successfully learned how to delete the data from database using API in view JS so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 19,584

Keywords: fundaofwebit, how to insert data into database using laravel api in vue js, vue js crud operation, vue js 3 tutorial, vue 3 crud application tutorial using api, vue 3 crud, vue 3 crud application, build a crud application using api in vue js 3, vue 3 tutorial from scratch, install vue js 3, integrate bootstrap axios in vue js, router in vue js

Id: PrKh6GemOyg

Length: 72min 56sec (4376 seconds)

Published: Thu May 25 2023