Vue JS CRUD - Delete data using API in Vue JS | delete data from database using API in Vue 3

hey guys welcome back so guys we are continuing our vojs card application using API 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 smooth 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 a at click equal to insert double quotes we are going to tell delete student function and inside this function we'll be passing the student ID so let us just copy this copy and paste inside this function deletes to that 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 curly brace 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 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 writtening 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: 7,315

Keywords: fundaofwebit, Delete data using API in Vue JS, how to delete data from database using api in vuejs 3, vuejs 3 delete data using axios from api, delete data using api in vue js, delete data from api in vue js, delete data from api in vue 3, how to delete data from api in vue js, how to call api in vue.js, vue 3 rest api, vue js crud tutorial, vue js 3 delete data

Id: T_nHhytGqk4

Length: 7min 55sec (475 seconds)

Published: Thu Feb 02 2023