laravel vue send array to backend

Question

I want to send array of id's to backend with one button from vuejs table but i get error 500.

Logic

1. Check the check boxes
2. Collect the id's
3. Send id's to back-end when click on button
4. update the view

Code

template

<table class="table table-dark table-hover table-bordered table-striped">
  <thead>
    <tr>
      <th class="text-center" width="50">
//the button
        <button class="btn btn-outline-danger" @click="withdraw(index)">Withdraw</button>
      </th>
      <th class="text-center" width="50">#</th>
      <th class="text-center">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(income,index) in incomes" v-bind:key="index">
    <td class="text-center">
 //check box input
      <input v-if="income.withdraw == '0'" type="checkbox" :id="income.id" :value="income.amount" v-model="checkedNumbers">
    </td>
    <td class="text-center">{{index+1}}</td>
    <td class="text-center">Rp. {{formatPrice(income.amount)}}</td>
   </tr>
   <tr>
    <td colspan="2"></td>
    <td>
      <span>Withdraw for today, Sum: <br> Rp. {{ formatPrice(sum) }}</span>
    </td>
   </tr>
  </tbody>
</table>

script

export default {
    data() {
        return {
            incomes: [],
            checkedNumbers: [],
        }
    },
    computed: {
        sum() {
            return this.checkedNumbers.reduce(function (a, b) {
                return parseInt(a) + parseInt(b);
            }, 0);
        }
    },
    methods: {
      withdraw(index) {
            let checkedids = this.incomes[index]
            axios.post(`/api/withdrawbutton/`+checkedids).then(response => {
                this.income[index].withdraw = '1'
                this.$forceUpdate()
            });
        }
    }
}

route

Route::post('withdrawbutton/{id}', 'IncomeController@withdrawbutton');

controller

public function withdrawbutton($id)
{
  $dowithdraw = Income::where('id', $id)->get();
  $dowithdraw->withdraw = '1';
  $dowithdraw->save();
  return response()->json($dowithdraw,200);
}

Any idea where is my mistake and how to fix it?

......................................................................................................................

Answer 1

Don't send the list as a GET parameter, send it as a POST:

let params = {}
params.ids = this.checkedNumbers

axios.post(`/api/withdrawbutton/`, params)
    .then(response => {
       this.income[index].withdraw = '1'
       this.$forceUpdate()
   });

Controller

public function withdrawbutton(Request $request)
{
  $dowithdraws = Income::whereIn('id', $request->input('ids', []));
  $dowithdraws->update(['withdraw' => '1']);

  return response()->json($dowithdraws->get(), 200);
}

Route

Route::post('withdrawbutton/', 'IncomeController@withdrawbutton');

And I don't think you need to update anything in the front because you already have them checked (if you want to keep them checked)