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
– Tanvir Ahmed, Commented Jan 2, 2021 at 17:40

Donkarnash · Accepted Answer · 2021-01-02 17:07:14Z

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

edited Jan 2, 2021 at 17:07

answered Jan 2, 2021 at 16:32

Donkarnash

12.9k5 gold badges30 silver badges43 bronze badges

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

1 Comment

Hotdot Cyber Over a year ago

Thanks but it is the same in my front end it shows success but nothing is deleted

Sharan · Accepted Answer · 2021-01-03 05:01:18Z

0

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

answered Jan 3, 2021 at 5:01

Sharan

3052 silver badges10 bronze badges

Collectives™ on Stack Overflow

Delete multiple rows using Laravel and Vue Js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related