Welcome back, Recently we have wrote an article on laravel vuejs 2 crud tutorial example which is the part of our Laravel vuejs 2 application series.
Today we are going to move to part 2 to which is learning to insert data into database using laravel as backend and VueJS 2 as frontend.
If you are very new to this tutorial, please visit our last wrote on article which will help you understand better on what we are doing here.
Laravel VueJS 2 Crud Tutorial (Fetch Data from Database) – Part 1
Lets get started
Last time we have created a ViewCategory component and populated dummy data into it. To insert data into database we need to create new component to input data and send it to database. So we will be needing new page with a form.
We can use same ViewCategory component in order to do this, but i would like to keep things simple and clean so that readers can easily understand on what we are going to achieve here.
Create new component named AddCategory.vue inside resources/assets/js/components/category.
First of all after creating a component we need to register it into the routes.js
|
1 2 3 4 5 6 7 8 |
import AddCategory from './components/category/addCategory'; // Append this line inside routes array { path:"/categories/add", component:AddCategory } |
After this we need a function to grab all the form data and pass it to laravel (backend) via axios.
Look at the code below :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<template> <div> <form name="myform" @submit.prevent="AddNewCategory" id="myForm"> <div class="form-group"> <label for="category_name">Category Name</label> <input type="text" class="form-control" name="category_name" placeholder="Enter Category Name"> </div> <div class="form-group"> <label for="category_description">Category Description</label> <textarea name="category_description" id="" cols="30" rows="10" class="form-control" placeholder="Enter Category Description"></textarea> </div> <div class="form-group"> <button class="btn btn-primary btn-sm btn-flat" type="submit">Add Category</button> </div> </form> </div> </template> <script> export default { name: "AddCategory", data () { return { category : [], } }, methods : { AddNewCategory() { var formData = new FormData(document.getElementById("myForm")); let instance = this; axios.post('api/categories/add', formData) .then(function (response) { console.log(formData); instance.$router.push("/categories"); }) .catch(function (error) { console.log(error); }); } } } </script> <style scoped> </style> |
If you look closer to the code above we can see that in addNewCategory() function in javascript, we are using axios and note the url we are using to send data to the laravel. We are going to create routes with same url in laravel and pass data to it.
Go to routes/api.php and register the routes.
|
1 |
Route::post('categories/add','CategoryController@addCategory'); |
Create new function called addCategory inside app/http/Controllers/CategoryController.php and paste these code below.
|
1 2 3 4 5 |
public function addCategory(Request $request) { $data = $request->all(); DB::table('tablename')->insert($data); return Response::json(true); } |
Now, Try reloading your page in the browser and navigate to categories/add and input all the values in the form and submit to check whether data is being sent to the server or not.
After successful sending data to laravel and on successful insert you will be redirected ViewCategory component from the line instance.$router.push("/categories");.
Finally, its done. Make sure you have also been through from first of our laravel vuejs 2 crud tutorial series.
If you have any problem then you can contact us via contact page.
Next : Laravel VueJS 2 CRUD Tutorial Part 3 (Update Data Into Database)
Leave a Reply