Throughout this Laravel Vue js CRUD example tutorial, you will see and understand how to build Create, Read, Update, and Delete API and how to consume APIs to perform CRUD operations in Laravel Vue JS application.
npm install axios and vue-axios
A. Fetch Operation
FetchdataComponent.vue
<template>
<section class="pt-8 pb-16" style="box-shadow:1px 1px 1px 1px 10px #f4f4f4;">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Slug</th>
</tr>
</thead>
<tr v-for="datas in result" v-bind:key="datas.id">
<td>{{ datas.name }}</td>
<td>{{ datas.slug }}</td>
</tr>
</table>
</section>
</template>
<script>
import axios from 'axios';
export default {
name: 'FetchdataComponent',
data(){
return {
result: { }
}
},
created(){
this.loadData();
},
methods: {
loadData(){
let siteurl = 'http://localhost:8000/api';
let path = siteurl+"/getitems";
axios.get(path)
.then((data) => {
console.log(data.data.data);
this.result = data.data.data;
});
}
} }
</script>
api.php
Route::get('/getitems', [CrudController::class, 'getitems']);
CrudController
function getitems(Request $req){
$data = DB::table('items')->paginate(10);
return response()->json($data);
}
B. Insert Operation
<div class="container"> <form action=""> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email" v-model="customer.email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" v-model="customer.password"> </div> <button type="button" class="btn btn-default">Submit</button> </form> </div>
<script>
import axios from 'axios';
export default {
name: 'Test',
data(){
return {
customer: {
email: '',
password: ''
}
}
},
methods: {
saved(){
this.submitForm();
},
submitForm(){
let siteurl = 'http://localhost:8000/api';
let path = siteurl+"/savecustomers";
axios.post(path, this.customer) (or you can use {customername:customername} instead of
this.customer)
.then((data) => {
alert('Data Saved');
});
}
}
}
</script>
Route::post('/savecustomers', [Otplesslogin::class, 'savecustomers']);
function savecustomers(Request $req){
$email = $req->email;
$password = $req->password;
$data = DB::table('test')->insert([
'email' => $email,
'password' => $password,
]);
if($data){
return response()->json('Data submited successfully !');
}
else{
return response()->json('Failled !');
}
}
