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

Check the check boxes
Collect the id's
Send id's to back-end when click on button
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?

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

dacastro4 · Accepted Answer · 2018-09-19 03:55:00Z

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)

edited Sep 19, 2018 at 3:55

answered Sep 19, 2018 at 1:56

dacastro4

3736 silver badges18 bronze badges

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

7 Comments

mafortis Over a year ago

hi, i get this error

"message": "Method Illuminate\\Database\\Eloquent\\Collection::update does not exist.",     "exception": "BadMethodCallException",

dacastro4 Over a year ago

I'm sorry. I'll edit my answer. Just so you know, I removed the get() and put it on the return json.

mafortis Over a year ago

now i'm getting code 200 with this response [] and in my console this errors:

[Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

and Uncaught (in promise) TypeError: Cannot read property 'undefined' of undefined

mafortis Over a year ago

need to mention status 200 i get but my database won't change

dacastro4 Over a year ago

Do you have the withdraw attribute in your fillable inside your Income model?

|

Collectives™ on Stack Overflow

laravel vue send array to backend

Logic

Code

1 Answer 1

Controller

Route

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Logic

Code

1 Answer 1

Controller

Route

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related