laravel vue将数组发送到后端

Question

我想通过{ue1}表中的一个按钮发送id's数组到后端，但是出现500错误。

逻辑

1. 选中复选框
2. 收集ID的
3. 单击按钮时将ID发送到后端
4. 更新视图

代码

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

知道我的错误在哪里以及如何解决？

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

Answer 1

不要将列表作为GET参数发送，而应将其作为POST发送：

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

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

控制器

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

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

路线

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

我认为您不需要在前面进行任何更新，因为您已经检查了它们（如果要保持选中状态）