我正在尝试使用复选框删除多个项目。我正在使用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:”查询已删除“,状态:200,statusText:”确定“,标题:{...},配置:{...},...}”但没有任何东西从数据库中删除。
任何人都可以使用复选框帮助找到多重删除的解决方案吗?
答案 0 :(得分:2)
您只需使用id
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);
}
}
另外,另一种不触及php代码的方法就是从复选框中获取id。
this.checkedRows.map(a=>a.id)