Delete multiple rows using Laravel and Vue Js - laravel

Question

Am having a problem deleting multiple rows in Laravel and Vue Js. I am able to get the values of id as an array. When I click on delete button I get a status 200 but no record is deleted from the database. Here is my code:
In my table
<tr v-for="user in users.data" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.userName}}</td>
<td><input type="checkbox" :value="user.id" v-model="checkedNames"></td>
<button class="btn btn-warning" #click=" deleteAllUser()">Delete
Selected</button>
</td>
</tr>
Vue Js
<script>
export default {
data(){
return{
checkedNames:[],
Function
deleteAllUser(){
this.form.post('api/deletehotspotusers/',{id:this.checkedNames}).then(()=>{
self.loadHotspotUsers();
}).catch(()=> {
Swal.fire("Failed!", "There was something wrong.", "warning");
});
}
}
In my controller
public function deleteAll(Request $request){
if($request->id){
foreach($request->id as $id){
HotspotUsers::destroy($id);
}
}
My route
Route::post('/deletehotspotusers', 'HotspotUsersController#deleteAll');

Answer 1

To delete a model record you need to call the delete method. You can try the below in the controller method
//import use statement at the top of the class
//use Illuminate\Support\Arr;
public function deleteAll(Request $request){
if($request->id){
HotspotUsers::whereIn('id', Arr::wrap($request->id))->delete();
}
}
In Vue, input type checkbox, v-model uses checked property and change event, so v-model will record either true or false based on the checked state. In order to populate the id with user.id, you need to make use of change event
<tr v-for="user in users.data" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.userName}}</td>
<td>
<input type="checkbox" :value="user.id" #change="onChecked(user.id)">
</td>
<td>
<button class="btn btn-warning" #click=" deleteAllUser()">
Delete Selected
</button>
</td>
</tr>
And in the script section in methods
onChecked(id){
if(!this.names.includes(id)){
this.names.push(id)
} else {
this.names.splice(this.names.indexOf(id),1)
}
}

Answer 2

I am not into vue.js.
If your front-end works good, then here is the laravel code.
Make sure that $request->id is receiving the value you expected.
You can use like
Model::destroy([array of primary keys])
If your Model's primary key is id, then you can specify array of ids like [1,2,3,4].
But before make sure the input values by using logger($request->id).
Thank you