Vuejs and Laravel insert update delete with Pagination Component

Vuejs and Laravel insert update delete with Pagination Component

In this Post We Will Explain About is Vuejs and Laravel insert update delete with Pagination Component With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel 5 Ajax CRUD with Pagination example and demo from scratch

In this post we will show you Best way to implement Laravel Jquery Ajax Pagination Example From Scratch, hear for How to Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Step 1: Laravel Installation

composer create-project --prefer-dist laravel/laravel live24u

Step 2: Create products table and model

php artisan make:migration create_products_table

After this simple command we will find more or one file in following simple laravel path Like as a database/migrations and we have to simple put bellow source code in your created migration file for new create products table.

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateItemsTable extends Migration
{

    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('comments');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::drop("products");
    }
}

namespace App;

use Illuminate\Database\Eloquent\Model;

class product extends Model
{

    public $fillable = ['title','comments'];

}

Step 3: Add Route and Controller

app/Http/routes.php

Route::get('manage-vue', '[email protected]');
Route::resource('vueproducts','VueProductController');

app/Http/Controllers/VueProductController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\product;

class VueProductController extends Controller
{

    public function manageVue()
    {
        return view('manage-vue');
    }

    public function index(Request $request)
    {
        $products = product::latest()->paginate(5);

        $results_data = [
            'custom_pagination' => [
                'total' => $products->total(),
                'rec_perpage' => $products->perPage(),
                'this_page' => $products->currentPage(),
                'last_cusom_page' => $products->lastPage(),
                'from' => $products->firstItem(),
                'to' => $products->lastItem()
            ],
            'data' => $products
        ];

        return results_data()->json($results_data);
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'comments' => 'required',
        ]);

        $create = product::create($request->all());

        return results_data()->json($create);
    }

    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'title' => 'required',
            'comments' => 'required',
        ]);

        $edit = product::find($id)->update($request->all());

        return results_data()->json($edit);
    }

    public function destroy($id)
    {
        product::find($id)->delete();
        return results_data()->json(['done']);
    }
}

Step 4: Create Blade File

resources/views/manage-vue.blade.php

	<title>Simple Laravel with Vue JS product CRUD</title>
	
	


<!-- Created By infinityknow.com - laravel 5.4 and vuejs-->

	<div class="container" id="manage-vue">

		<div class="row">
		    <div class="col-lg-12 margin-tb">
		        <div class="pull-left">
		            <h2>Laravel with Vue JS product CRUD</h2>
		        </div>
		        <div class="pull-right">
				<button type="button" class="btn btn-success">
				  Create product
				</button>
		        </div>
		    </div>
		</div>
<!-- Created By infinityknow.com - laravel vuejs starter-->

		<!-- product Listing -->
		<table class="table table-bordered">
			<tr>
				<th>Title</th>
				<th>Description</th>
				<th width="200px">Action</th>
			</tr>
			<tr>
				<td>@{{ product.title }}</td>
				<td>@{{ product.comments }}</td>
				<td>	
			      <button class="btn btn-primary">Data Edit</button>
			      <button class="btn btn-danger">Data Delete</button>
				</td>
			</tr>
		</table>
<!-- Created By infinityknow.com - crud operations in vue js-->

		<!-- Vuejs Pagination -->
		<nav>
	        <ul class="custom_pagination">
	            <li> 1">
	                <a href="#">
	                    <span>«</span>
	                </a>
	            </li>
	            <li>
	                <a href="#">@{{ custom_page }}</a>
	            </li>
	            <li v-if="custom_pagination.this_page 
	                <a href="#">
	                    <span>»</span>
	                </a>
	            </li>
	        </ul>
	    </nav>
<!-- Created By infinityknow.com - laravel 5.4 vue js crud-->
	    <!-- Create product Modal -->
		<div class="modal fade" id="create-product" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close"><span>×</span></button>
		        <h4 class="modal-title" id="myModalLabel">Create product</h4>
		      </div>
		      <div class="modal-body">
<!-- Created By infinityknow.com Form - laravel 5.4 vue js crud-->
		      		<form method="POST" enctype="multipart/form-data">

		      			<div class="form-live-group">
						<label for="title">Title:</label>
						
						<span class="error text-danger">@{{ formErrors['title'] }}</span>
					</div>

					<div class="form-live-group">
						<label for="title">Description:</label>
						<textarea name="comments" class="form-control"></textarea>
						<span class="error text-danger">@{{ formErrors['comments'] }}</span>
					</div>

					<div class="form-live-group">
						<button type="submit" class="btn btn-success">Submit</button>
					</div>

		      		</form>

		        
		      </div>
		    </div>
		  </div>
		</div>
<!--Edit product Modal - Created By infinityknow.com - laravel 5.4 vue js crud-->
		<!-- Edit product Modal -->
		<div class="modal fade" id="edit-product" role="dialog">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close"><span>×</span></button>
		        <h4 class="modal-title" id="myModalLabel">Edit product</h4>
		      </div>
		      <div class="modal-body">

		      		<form method="POST" enctype="multipart/form-data">

		      			<div class="form-live-group">
						<label for="title">Title:</label>
						
						<span class="error text-danger">@{{ live_form_array['title'] }}</span>
					</div>

					<div class="form-live-group">
						<label for="title">Description:</label>
						<textarea name="comments" class="form-control"></textarea>
						<span class="error text-danger">@{{ live_form_array['comments'] }}</span>
					</div>

					<div class="form-live-group">
						<button type="submit" class="btn btn-success">Submit</button>
					</div>

		      		</form>

		      </div>
		    </div>
		  </div>
		</div>

	</div>

	<a href="http://jquery.min.js">http://jquery.min.js</a>
	<a href="http://bootstrap.min.js">http://bootstrap.min.js</a>
	<a href="http://toastr.min.js">http://toastr.min.js</a>
    
	<a href="http://vue.min.js">http://vue.min.js</a>
	<a href="http://vue-resource.min.js">http://vue-resource.min.js</a>
	<a href="/js/product.js">/js/product.js</a>

Step 5: Create JS File

public/js/product.js

Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value");

new Vue({

  el: '#manage-vue',

  data: {
    products: [],
    custom_pagination: {
        total: 0, 
        rec_perpage: 2,
        from: 1, 
        to: 0,
        this_page: 1
      },
    offset: 4,
    formErrors:{},
    live_form_array:{},
    cnewproducts : {'title':'','comments':''},
    pro_item : {'title':'','comments':'','id':''}
  },

  computed: {
        isActived: function () {
            return this.custom_pagination.this_page;
        },
        pagesNumber: function () {
            if (!this.custom_pagination.to) {
                return [];
            }
            var from = this.custom_pagination.this_page - this.offset;
            if (from = this.custom_pagination.last_cusom_page) {
                to = this.custom_pagination.last_cusom_page;
            }
            var vue_pagesarr = [];
            while (from  {
            this.$set('products', results_data.data.data.data);
            this.$set('custom_pagination', results_data.data.custom_pagination);
          });
        },

        createProduct: function(){
		  var input = this.cnewproducts;
		  this.$http.post('/vueproducts',input).then((results_data) => {
		    this.changePage(this.custom_pagination.this_page);
			this.cnewproducts = {'title':'','comments':''};
			$("#create-product").modal('hide');
			toastr.success('product Created Successfully.', 'Success Alert', {timeOut: 5000});
		  }, (results_data) => {
			this.formErrors = results_data.data;
	    });
	},

      remove_item: function(product){
        this.$http.delete('/vueproducts/'+product.id).then((results_data) => {
            this.changePage(this.custom_pagination.this_page);
            toastr.success('product Deleted Successfully.', 'Success Alert', {timeOut: 5000});
        });
      },

      live_edit: function(product){
          this.pro_item.title = product.title;
          this.pro_item.id = product.id;
          this.pro_item.comments = product.comments;
          $("#edit-product").modal('show');
      },

      custm_liveupdate: function(id){
        var input = this.pro_item;
        this.$http.put('/vueproducts/'+id,input).then((results_data) => {
            this.changePage(this.custom_pagination.this_page);
            this.pro_item = {'title':'','comments':'','id':''};
            $("#edit-product").modal('hide');
            toastr.success('product Updated Successfully.', 'Success Alert', {timeOut: 5000});
          }, (results_data) => {
              this.live_form_array = results_data.data;
          });
      },

      changePage: function (custom_page) {
          this.custom_pagination.this_page = custom_page;
          this.getVueProducts(custom_page);
      }

  }

});

Example

I hope you have Got Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.