Skip to content
InfinityKnow

InfinityKnow

Infinity Knowledge (IK) : Technology, Articles, Topics, Facts or many More.

  • Home
  • Education
    • yttags
    • Make Money
    • Jobs
    • Programming
      • Technology
      • Web Design
      • WEB HOSTING
      • Interview
  • Entertainment
    • pakainfo
    • Sports
    • Tips and Tricks
      • Law
      • Photography
      • Travel
  • Health
    • Insurance
    • Lifestyle
      • Clothing
      • Fashion
      • Food
  • News
    • Insurance
      • Auto Car Insurance
      • Business Insurance
    • Donate
    • California
  • News
    • Political
  • Home Improvement
  • Trading
    • Marketing
    • Top Tranding
    • Business
    • Real Estate
  • Full Form
  • Contact Us
  • oyo full form – oyo Kya Hai, Meaning and Abbreviation – What is the full form of oyo? full form
  • Natural Himalayan Wonder
    Moderate Treks : Natural Himalayan Wonder Articles
  • Search Comma Separated values using Laravel Query FIND_IN_SET
    Search Comma Separated values using Laravel Query FIND_IN_SET Technology
  • Friendship quotes Quotes
  • Auto insurance quotes Quotes
  • Increase AdSense CPC High Paying keywords
    Increase AdSense CPC High Paying keywords Google Adsense
  • keral mein kaun si bhasha boli jaati hai Facts
  • Angular Email sending using PHP Technology
Vuejs and Laravel insert update delete with Pagination Component

Vuejs and Laravel insert update delete with Pagination Component

Posted on July 5, 2019 By admin No Comments on 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

[php]
composer create-project –prefer-dist laravel/laravel live24u
[/php]

Step 2: Create products table and model

[php]
php artisan make:migration create_products_table
[/php]

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.

READ :  Vuejs RESTful Web Service Example - Vue RESTful APIs VueResource

[php]
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”);
}
}
[/php]
app/product.php
[php]
namespace App;

use Illuminate\Database\Eloquent\Model;

class product extends Model
{

public $fillable = [‘title’,’comments’];

}
[/php]

Step 3: Add Route and Controller

app/Http/routes.php
[php]
Route::get(‘manage-vue’, ‘[email protected]’);
Route::resource(‘vueproducts’,’VueProductController’);
[/php]

app/Http/Controllers/VueProductController.php

[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’]);
}
}
[/php]

READ :  Angular Call Function on Page Load Example

Step 4: Create Blade File

resources/views/manage-vue.blade.php
[php]

Simple Laravel with Vue JS product CRUD

Laravel with Vue JS product CRUD

Title Description Action
@{{ product.title }} @{{ product.comments }}

  • 1″>

    «
  • @{{ custom_page }}
  • <li v-if="custom_pagination.this_page

    »


Create product

@{{ formErrors[‘title’] }}



@{{ formErrors[‘comments’] }}


Edit product

@{{ live_form_array[‘title’] }}



@{{ live_form_array[‘comments’] }}

http://jquery.min.js
http://bootstrap.min.js
http://toastr.min.js

http://vue.min.js
http://vue-resource.min.js
/js/product.js

[/php]

Step 5: Create JS File

public/js/product.js
[php]
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);
}

}

});
[/php]

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.

Related posts:

  1. vuejs insert update delete CRUD application
  2. Angular 4 CRUD Operation MVC – Angular 4 insert update delete
  3. Laravel Modal Confirmation before delete Record
  4. Create Laravel Pagination using Vuejs CRUD
Technology, Laravel, MySQL, PHP, VueJs Tags:how to use vuejs with laravel, laravel 5.4 vue js crud, laravel 5.4 vue js tutorial, laravel 5.4 vue tutorial, laravel 5.5 vuejs, laravel vue js crud example, laravel vuejs, laravel vuejs components

Post navigation

Previous Post: Vuejs Form input get value – Fetch data in vuejs based on input value
Next Post: Vuejs upload File with progressbar vue file upload component

Related Posts

  • vuejs-datepicker vuejs datetimepicker – Vuejs Calendar Example
    vuejs-datepicker vuejs datetimepicker – Vuejs Calendar Example Technology
  • jQuery Export HTML Table Data to Excel, CSV and Text
    jQuery Export HTML Table Data to Excel, CSV and Text Technology
  • VueJs dynamic table rows – Add and Delete Rows dynamically using VueJs
    VueJs dynamic table rows – Add and Delete Rows dynamically using VueJs Technology
  • Vuejs RESTful Web Service Example – Vue RESTful APIs VueResource
    Vuejs RESTful Web Service Example – Vue RESTful APIs VueResource Technology
  • Angularjs Insert Update Delete CRUD
    Angularjs Insert Update Delete CRUD Technology
  • AngularJS Datepicker Directives Example with Source Code
    AngularJS Datepicker Directives Example with Source Code Technology

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Account web hosting (1)
  • AngularJs (277)
  • Articles (143)
  • Asp.Net (49)
  • Astrology (2)
  • Attorney (7)
  • Auto Car Insurance (4)
  • Biography (2)
  • Business (9)
  • Business Insurance (3)
  • California (4)
  • Choose the web hosting (1)
  • Clothing (6)
  • cloud (8)
  • Cloud data storage (2)
  • Credit (1)
  • Dedicated hosting server web (1)
  • Dedicated server web hosting (1)
  • Dedicated web hosting (1)
  • Degree (11)
  • Design (9)
  • Differences shared hosting (1)
  • Donate (2)
  • Education (37)
  • Energy web hosting (1)
  • Entertainment (6)
  • Facts (12)
  • Fashion (3)
  • Finance (3)
  • Food (5)
  • full form (90)
  • Google Adsense (22)
  • Health (20)
  • Home Improvement (5)
  • Insurance (6)
  • Interview (2)
  • Jobs (6)
  • jquery (2)
  • jQuery (2)
  • Laravel (164)
  • Lawyer (4)
  • Lifestyle (6)
  • Loans (6)
  • Make Money (31)
  • Managed dedicated server (1)
  • Managed hosting solution (1)
  • Managed servers (1)
  • Marketing (8)
  • Mortgage (2)
  • Movies (21)
  • MySQL (180)
  • News (5)
  • Photography (1)
  • PHP (250)
  • Programming (18)
  • Quotes (75)
  • Real Estate (2)
  • SEO (9)
  • Shared web hosting (1)
  • Shayari (67)
  • Sports (5)
  • Status (34)
  • Stories (45)
  • suvichar (8)
  • Tech (3)
  • Technology (675)
  • Tips and Tricks (42)
  • Top Tranding (35)
  • Trading (28)
  • Travel (12)
  • Uncategorized (8)
  • VueJs (179)
  • Web Design (2)
  • WEB HOSTING (1)
  • Web hosting company (1)
  • Web hosting really (1)
  • Web hosting windows (1)
  • Which website hosting (1)
  • Wishes (13)
  • wordpress (15)

Categories

AngularJs (277) Articles (143) Asp.Net (49) Attorney (7) Business (9) Clothing (6) cloud (8) Degree (11) Design (9) Education (37) Entertainment (6) Facts (12) Food (5) full form (90) Google Adsense (22) Health (20) Home Improvement (5) Insurance (6) Jobs (6) Laravel (164) Lifestyle (6) Loans (6) Make Money (31) Marketing (8) Movies (21) MySQL (180) News (5) PHP (250) Programming (18) Quotes (75) SEO (9) Shayari (67) Sports (5) Status (34) Stories (45) suvichar (8) Technology (675) Tips and Tricks (42) Top Tranding (35) Trading (28) Travel (12) Uncategorized (8) VueJs (179) Wishes (13) wordpress (15)
  • C# Collections Tutorial with Examples Technology
  • Angular ng blur Event Example Technology
  • Vue js Axios PHP File Upload Example
    Vue js Axios PHP File Upload Example VueJs
  • Laravel Excel and csv Import Export Example
    Laravel Excel and csv Import Export Example Technology
  • happy krishna janmashtami images
    happy krishna janmashtami images Quotes
  • Add Remove and Update specific data In JSON using AngularJS
    Add Remove and Update specific data In JSON using AngularJS Technology
  • Ply Corrugated Boxes
    Importance Of Ply Value In Ply Corrugated Boxes Marketing
  • Laravel Dynamically Adding Multiple Columns in datatable server side Technology

Copyright © 2022 InfinityKnow.

Powered by PressBook News WordPress theme