Delete Multiple Records using Checkbox in Laravel 6 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.

So for this tutorial i have a user table. I will delete every items at a time or multiple selected items at a time. you can do what ever you want.

So how to delete multiple records using checkbox in laravel 6 ? 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 6 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 : Install Vue dependency and edit configurations

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://127.0.0.1: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