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

Question

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:

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

    <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>

<script>

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:

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?

have you checked if the array is passed correctly in the request? — Benjamin Gakami
– Benjamin Gakami, Commented Apr 20, 2018 at 10:05
hmmm....I dont think it does....my request URL is /demo-enquiries?id[]=%7B%22id%22:40,%22first_name%22:%22Anton%22,%22last_name%22:%22Sirik%22,%22email%22:%[email protected]%22,%22job_title%22:%22Marketing+Executive%22,%22company%22:%22i- and so on and on — Anton Sirik
– Anton Sirik, Commented Apr 20, 2018 at 10:38
the request object is null from the url above, which means the problem is your not passing any id, can you check if that array has any data in vue devtools — Benjamin Gakami
– Benjamin Gakami, Commented Apr 20, 2018 at 11:12
@Jackowski, I believe this is what goes through on request: id[]: {"id":39,"first_name":"Anton","last_name":"Sirik","email":"[email protected]","job_title":"Marketing","company":"i-nexus","phone":"+447507633865","consent":"1","created_at":"2018-04-18 13:35:41","updated_at":"2018-04-18 13:35:41"} id[]: {"id":40,"first_name":"Anton","last_name":"Sirik","email":"[email protected]","job_title":"Marketing Executive","company":"i-nexus","phone":"+447507633865","consent":"1","created_at":"2018-04-18 13:37:29","updated_at":"2018-04-18 13:37:29"} — Anton Sirik
– Anton Sirik, Commented Apr 20, 2018 at 12:05

Luis felipe De jesus Munoz · Accepted Answer · 2018-04-20 14:10:27Z

2

You just need to extract the id from the object array using array_column()

public function destroy(Request $request)
{
    try 
    {
        $ids = array_column($request->id, "id");
        Demorequest::whereIn('id', $ids)->delete(); 
        return response()->json('Enquiry deleted');
    }

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

Also, another way to do it without touching the php code is getting only the id from the checkboxes.

this.checkedRows.map(a=>a.id)

edited Apr 20, 2018 at 14:10

answered Apr 20, 2018 at 13:20

Luis felipe De jesus Munoz

8,0133 gold badges38 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anton Sirik Over a year ago

I get 405 Method Not Allowed :(

Luis felipe De jesus Munoz Over a year ago

@AntonSirik change Route::delete('manage/demo-enquiries/', 'DemorequestController@destroy') to Route::get('manage/demo-enquiries/', 'DemorequestController@destroy')

Anton Sirik Over a year ago

the checked rows array gets passed instead of ids

Anton Sirik Over a year ago

still get 405 Method Not Allowed

Anton Sirik Over a year ago

DELETE /manage/demo-enquiry?id[]=40&id[]=39&id[]=38&id[]=37&id[]=36 405 (Method Not Allowed)

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related