How to delete multiple rows using checkbox in Laravel + Vue.js + Axios + Buefy

Hi all,

I am trying to implement a deletion of multiple items using checkbox. I am using Laravel 5.5, Vue.js and Bulma's component - Buefy + Axios.

My Vue.js Component:

` <button class="button field is-small is-danger" @click="checkedRows = []" :disabled="!checkedRows.length"> <b-icon icon="close"></b-icon> Clear checked <button class="is-small button is-danger" @click.prevent="onDelete" title="Delete checked" :disabled="!checkedRows.length">

    <b-field grouped group-multiline>                      
        <b-select v-model="perPage" :disabled="!isPaginated" size="is-small">
            <option value="5">5 per page</option>
            <option value="10">10 per page</option>
            <option value="15">15 per page</option>
            <option value="20">20 per page</option>
        </b-select>
        <div class="control">
            <button class="button is-small" @click="currentPage = 2" :disabled="!isPaginated">Set page to 2</button>
        </div>
        <div class="control is-flex">
            <b-switch v-model="isPaginated" size="is-small">Paginated</b-switch>
        </div>
        <div class="control is-flex">
            <b-switch v-model="isPaginationSimple" :disabled="!isPaginated" size="is-small">Simple pagination</b-switch>
        </div>
    </b-field>

    <b-table
        :data="enquiries"
        :paginated="isPaginated"
        :per-page="perPage"
        :current-page.sync="currentPage"
        :pagination-simple="isPaginationSimple"
        :default-sort-direction="defaultSortDirection"
        default-sort="created_at"
        :checked-rows.sync="checkedRows"
        :is-row-checkable="(row) => row.id !== 3"
        checkable>

        <template slot-scope="props">
            <b-table-column field="id" label="ID" width="40" sortable numeric>
                <small>{{ props.row.id }}</small>
            </b-table-column>

            <b-table-column field="date" label="Registration date" sortable centered>
                <span class="tag is-success">
                    {{ new Date(props.row.created_at).toLocaleDateString() }}
                </span>
            </b-table-column>

            <b-table-column field="company" label="Company" sortable>
                <small>{{ props.row.company }}</small>
            </b-table-column>

            <b-table-column field="first_name" label="First Name" sortable>
                <small>{{ props.row.first_name }}</small>
            </b-table-column>

            <b-table-column field="last_name" label="Last Name" sortable>
                <small>{{ props.row.last_name }}</small>
            </b-table-column>   

            <b-table-column field="email" label="Email" sortable>
                <small>{{ props.row.email }}</small>
            </b-table-column> 

            <b-table-column field="phone" label="Phone" sortable>
                <small>{{ props.row.phone }}</small>
            </b-table-column> 
            
        </template>
    </b-table>
</section>

export default {
    data() {
        return {                      
            enquiries: [],
            errors: [],
            isPaginated: true,
            isPaginationSimple: false,
            defaultSortDirection: 'asc',
            currentPage: 1,
            perPage: 5,
            checkedRows: []

        }
    },       

    created() {
        axios.get('/manage/demo-enquiries')
             .then(response => {
                this.enquiries = response.data  
             })
             .catch(e => {
                this.errors.push(e)
             })
    }, 

    methods: {
        onDelete() {
            axios.delete('/manage/demo-enquiries', {params: {'id': 
                this.checkedRows}})
                .then((response) => {
                    console.log(response)
                }, (error) => {
                    // error callback
            })
        }
    }       
}

`

Route:

Route::delete('manage/demo-enquiries/', 'DemorequestController@destroy');

And Controller:

`<?php

namespace App\Http\Controllers;

use App\Demorequest; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use App\Mail\DemoContact; use App\Mail\DemoDetails; use Mail;

class DemorequestController extends Controller { public function index() { $enquiries = Demorequest::orderBy('created_at', 'desc')->get();

    return json_encode($enquiries);
}

public function destroy(Request $request)
{
    try 
    {
        Demorequest::whereIn('id', $request->id)->delete(); // $request->id MUST be an array
        return response()->json('Enquiry deleted');
    }

    catch (Exception $e) {
        return response()->json($e->getMessage(), 500);
    }
}`

When I select several rows and click delete, the browser console says "{data: "Enquiry deleted", status: 200, statusText: "OK", headers: {…}, config: {…}, …}" but nothing gets removed from the DB.

Can anyone please help find a solution to multi deletion using checkbox?