If you are a beginner to Laravel and VueJs, probably you are confused by watching tutorial or article were shown advanced setup of VueJs and other configurations. In this tutorial, I'll show you how to easily make a CRUD operation in Laravel with VueJs.
In this tutorial, I'll use VueJs 2.0 and Laravel version 6.0. You can do exactly the same things on other Laravel versions from 5.0 to up to Laravel current version. So keep following this article with concentrations.
Our table is a simple contact list table with 3 fields id, name, phone
1st Step: Define routes in web.php file.
Route::get('contacts','ContactController@getIndex');
Route::post('contacts','ContactController@postStore');
Route::get('contacts/data','ContactController@getData');
Route::post('contact/update','ContactController@postUpdate');
Route::post('contact/delete','ContactController@postDelete');2nd Step: Make a Contact model.
<?php namespace App;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
public $timestamps = false;
protected $table = 'contacts';
protected $fillable = ['name','phone'];
}In this model, I have used public $timestamps = false; because we are not using two required fields that are needed for Laravel eloquent model, fields called created_at and updated_at. So that Laravel won't throw an exception on table record creation and update.
Step 3: Make ContactController.php file.
<?php namespace App\Http\Controllers;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Contact;
class ContactController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
public function getIndex()
{
return view('admin.contacts');
}
public function getData()
{
return Contact::all();
}
public function postStore(Request $request)
{
return Contact::create($request->all());
}
public function postUpdate(Request $request)
{
if($request->has('id')){
$record = Contact::find($request->input('id'));
$record->update($request->all());
}
}
public function postDelete(Request $request)
{
if($request->has('id')){
$record = Contact::where('id',$request->input('id'));
$record->delete();
}
}
}Step 4: Now create a contacts.blade.php view in resources/views/admin folder.
@extends('admin.template')
@section('content')
<div id="app">
<div class="col-md-12">
<div class="clearfix">
<span>Laravel - Vue Js CRUD</span>
<a class="btn btn-success btn-sm pull-right" @click="create()">Add New</a>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Contact List</h3>
</div>
<table class="table table-bordered table-striped table-condensed">
<tr>
<td>ID</td>
<td>NAME</td>
<td>PHONE</td>
<td>ACTION</td>
</tr>
<tr v-for="row in data">
<td>@{{row.id}}</td>
<td>@{{row.name}}</td>
<td>@{{row.phone}}</td>
<td>
<button @click="edit(row)"
type="button"
class="btn btn-xs btn-warning"
title="Edit Record"><i class="fa fa-edit"></i></button>
<button @click="deleteRecord(row)"
type="button"
class="btn btn-xs btn-danger"
title="Delete Record"><i class="fa fa-trash"></i></button>
</td>
</tr>
</table>
</div>
</div>
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title">@Edit Contact</h4>
</div>
<div class="modal-body">
<input type="hidden" v-model="Contact.id">
<div class="form-group">
<label>Name</label>
<input class="form-control input-sm" type="text" v-model="Contact.name">
</div>
<div class="form-group">
<label>Phone</label>
<input class="form-control input-sm" type="number" v-model="Contact.phone">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button v-if="isInsert" type="button" class="btn btn-primary"
@click="store(Contact)">Save
</button>
<button v-if="!isInsert" type="button" class="btn btn-primary"
@click="update(Contact)">Update
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<!--app instance end-->
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
var csrtToken = '';
var adminUrl = '';
var app = new Vue({
el: '#app',
data: {
data: [],
isInsert: true,
Contact: {id:null,name: null,phone: null}
},
created: function () {
this.init();
},
methods: {
init: function () {
this.$http.get(adminUrl + '/contacts/data')
.then(function (res) {
this.data = res.data
})
},
create: function () {
this.isInsert = true,
this.Contact = {}
$('#modal').modal()
},
store: function (data) {
if (!confirm('Are you sure?')) return;
data._token = csrtToken;
this.$http.post(adminUrl + '/contacts/store', data)
.then(function (res) {
this.init();
$('#modal').modal('hide');
this.Contact = {}
})
},
edit: function (row) {
this.isInsert = false,
this.Contact = row;
$('#modal').modal();
},
update: function (data) {
if (!confirm('Are you sure?')) return;
data._token = csrtToken;
this.$http.post(adminUrl + '/contacts/update', data)
.then(function (res) {
this.init()
$('#modal').modal('hide');
this.Contact = {}
})
},
deleteRecord: function (row) {
if (!confirm('Are you sure?')) return;
row._token = csrtToken;
this.$http.post(adminUrl + '/contacts/delete', row)
.then(function (res) {
this.init()
})
}
}
})
</script>
@endsectionFinished! If you get this tutorial helpful, please share it with others via social media.
