Delete Multiple Records Using Checkbox In Laravel 6 And Vue Js

Hello Artisan,How to delete multiple rows using checkbox in Laravel and Vue? In this tutorial, I am going to show that how to delete multiple rows using checkbox in laravel with vue js. We can delete one or more rows at a time or we can delete all rows at a time using vue js checkbox laravel.

We are going to implement that delete all rows with click event using vue js and laravel. If you don't know how to delete records with checkbox then this example is for you. Let's see the example of how to delete multiple records or rows using checkbox in laravel vue js.

But in this tutorial for deleting 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 a specific user

Preview: After hitting select all checkbox button

Preview: Before all deleted 

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 the first step, If you haven't installed Laravel in your system then you have to run the bellow command and get a 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 the below command

php artisan make:controller UserController 

Now open the user controller and paste the 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();
       }

    }
}

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

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 a user component and after creating a 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 deleting multiple records via checkbox using laravel and vue js tutorial will help you.