Laravel Vue Js Delete Multiple Records Using Checkbox Example

Hello Artisan 

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

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

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

So how to delete multiple records using the checkbox in laravel? If you don't know then you can follow the 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

Preview : After selecting specific user

Preview : After hitting select all checkbox button

Preview : Before all delete 

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','UserController@index')->name('userlist');
Route::post('/deleteuser/{id}','UserController@delete_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

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.