如何在 Laravel 5.5 + Vue.js + Axios 中使用复选框删除多行

Question

我正在尝试使用复选框来删除多个项目。我正在使用 Laravel 5.5、Vue.js 和 Bulma 的组件 - Buefy + Axios。

我的 Vue.js 组件：

<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::delete('manage/demo-enquiries/', 'DemorequestController@destroy');

和控制器：

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);
    }
}

当我选择几行并单击删除时，浏览器控制台显示“{data: "Enquiry deleted", status: 200, statusText: "OK", headers: {…}, config: {…}, …}"但不会从数据库中删除任何内容。

任何人都可以帮助找到使用复选框的多删除解决方案吗？

Answer 1

您只需要使用array_column()从对象数组中提取id

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);
    }
}

另外，另一种不接触 php 代码的方法是只从复选框中获取 id。

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