Vue JS CRUD - How to Insert data using API in Vue JS | Insert data using Laravel API in Vue 3 axios

hey guys welcome back so guys we are continuing our Cloud application in view.js using API okay so now guys as we have seen in previous video how to fetch the records using API in view.js 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 vujs 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 five 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 chords 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 uh 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 cool 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 I mean 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 this 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 devtool so I have already installed that extension in your Google Chrome okay so this is my so 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 U 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 whisper 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 now 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 axis okay so as simple dot catch catch function type the function of whatever the response you get inside this catch so as 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 catch 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 will 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 this 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 Ally Li tag and here you need to use V hyphen f object dot Keys function dot length 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 you will show so before that is the V4 now this Dot error list open and close bracket in here err 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 here 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 0 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 contentions 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 axiose and import import axials from axios 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'm 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 view.js using API so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 5,140

Keywords: fundaofwebit, vue js crud tutorial, vue 3 crud application with api, how to insert data using api in vue js 3, insert data using laravel api in vue 3, vue js insert data into database using api in vue js laravel, laravel vuejs crud, Insert data using laravel API in Vue 3, use axios in vue js, use axios in vue js to insert data, insert data in vue js using api, laravel api in vuejs, Vue JS CRUD, laravel rest api and vuejs 3 crud

Id: _ytZXE_TduU

Length: 19min 8sec (1148 seconds)

Published: Tue Jan 31 2023