Delete Multiple Records using Checkbox in Laravel and Vue Js

Hello Artisan 

In this tutorial i am going to show you step by step how to delete multiple rows using checkbox in laravel. It is a common requirement in every application.

you will know that It's almost need to give feature to remove multiple records using checkbox, if you are developing an e-commerce application or any big web application then you must give feature to delete multiple records.

So for this tutorial i have a user table. I will delete every users at a time or multiple selected users at a time. you can do what ever you want. That mean you can also delete single record or two or as many as you want.

So how to delete multiple records using checkbox in laravel 7 ? If you dont know then you can follow below tutorial which i already made using jquery and ajax.

Read also : Delete Multiple Records Via Checkbox Using jQuery Ajax in Laravel

But in this tutorial for delete multiple rows i am using laravel 7 and vue js. Hope it will be very easy to do it rather than using jquery ajax. Let's start our multiple delete in laravel vue tutorial.

Preview : Before selecting users

how to delete multiple rows using checkbox in laravel

Preview : After selecting specific user

how to delete multiple records using checkbox in laravel 6

Preview : After hitting select all checkbox button

laravel 6 delete multiple rows

Preview : Before all delete 

delete-multiple-rows-laravel-vue-js

Now if you select delete all then our all users will be deleted. So let's start multiple rows deleted exmple tutorial using laravel and vue js.

Step 1: Laravel Installation

In first step, If you haven't installed Laravel in your system then you have to run bellow command and get fresh Laravel project.

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

 

Step 2: Define the routes

Now, we need to define the API routes inside the routes >> web.php file.

routes/web.php

Route::get('/userlist','[email protected]')->name('userlist');
Route::post('/deleteuser/{id}','[email protected]_user');

 

Step 3 : Create Controller

To quickly create UserController, run below command

php artisan make:controller UserController 

Now open user controller and paste those following code.

app/Http/Controllers/UserController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class UserController extends Controller
{
    public function index()
    {

        return response()->json([
            'users' => \App\User::latest()->get()
        ], Response::HTTP_OK);
        
    }

    public function delete_user($id)
    {
       $single_user_id = explode(',' , $id);

       foreach($single_user_id as $id) {
           \App\User::findOrFail($id)->delete();
       }

    }
}

 

Step 4 :  Setup Vue

Now, go inside the project folder and install the frontend dependencies using the following command.

npm install

 

Step 5: Setup app.js file

resources/js/app.js


require('./bootstrap');

window.Vue = require('vue');

Vue.component('user-component', require('./components/UserComponent.vue').default);

const app = new Vue({
    el: '#app',
});

 

Read also : Laravel 6 Ajax Form Submit With jQuery Validation

Step 6 : Create UserComponent

Now we have to create user component and after creating user component, just paste this below code to complete our laravel vue js delete multiple rows tutorial.

resources/js/components/UserComponent.vue

 

Step 7 : Create Blade File to View User

Now we have to create our view file to see our users table. So create it inside this following delectory

resources/views/welcome.blade.php

 

Now run this below command to compile our entire javascript file. 

npm run dev
//or
npm run watch

Now if you visit this below url

http://localhost:8000

After creating some dummy users, you should see the below image

delete-multiple-records-laravel-vuejs

You can simply use tinker to make dummy users. Just do it

php artisan tinker
// then
factory(\App\User::class,5)->create()

And now you are ready to check this project. Hope this delete multiple records via checkbox using laravel and vue js tutorial will help you. 

 

A web enthusiastic, self-motivated Full-Stack Web Developer from Dhaka, Bangladesh with experience in developing applications using JavaScript, Laravel & Wordpress specifically. Facebook Github Website