Delete multiple rows using Laravel and Vue Js

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

replace your api url like this.... this.form.post('/api/deletehotspotusers/',{id:this.checkedNames})......you forgot to add '/' at the beginnign of your url....and if you still have same problem then check what did you get in your request ....and also do try catch in your controller function and dd($e) your exception message — Tanvir Ahmed, Jan 02 '21 at 17:40

Donkarnash · Answer 1 · 2021-01-02T17:07:14.497

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

Thanks but it is the same in my front end it shows success but nothing is deleted — Hotdot Cyber, Jan 02 '21 at 16:38

score 0 · Answer 2 · answered Jan 03 '21 at 05:01

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

Delete multiple rows using Laravel and Vue Js

2 Answers2