How to pass array data from vuejs to laravel api controller - laravel

Question

I want to make an invoice system with laravel using vuejs by api. Firstly show all product and when i click add to cart it added.
Here is the screenshot:
Now i want to send input fill data to order_masters table and including last inserted ID cart data send order_details table.
but i cant not pass the whole data. sometime pass customer information but not cart data.
N. B: I am using vuejs, vform and API
My component code is given below:
<template>
<div class="row">
<div class="col-md-7">
<div class="col-md-11">
<input type="hidden" v-model="field">
<input type="search" v-model="query" class="form-control form-control-sm mb-3" placeholder="Search Here">
</div>
<div class="row justify-content-center">
<div v-show="products.length" v-for="(product, id) in products" :key="id" class="card col-xl-3 col-md-3 col-sm-3 mb-5 mr-5 float-left" style="background-color:lightgray">
<div class="card-body">
<h5 class="card-title">{{product.name}}</h5>
<p class="card-text"><input type="text" v-model="product.qty" class="form-control form-control-sm mb-2"></p>
<strong class="">
{{product.price}} TK
</strong>
<button class="btn btn-sm btn-primary float-right" #click="addToCart(product)">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<div v-show="!products.length" class="alert alert-danger text-center" role="alert">
<strong>Opps! No Data Found!</strong>
</div>
<pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" #paginate="query === ''? showProduct(): searchProduct()"></pagination>
</div>
<div class="col-md-5 float-righ">
<form #submit.prevent="store" #keydown="form.onKeydown($event)">
<alert-error :form="form"></alert-error>
<div class="row mb-2">
<label for="" class="col-md-3 font-weight-bold">Name</label>
<div class="col-md-9">
<input type="text" v-model="form.name" name="name" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
</div>
<div class="row mb-2">
<label for="" class="col-md-3 font-weight-bold">Phone</label>
<div class="col-md-9">
<input type="text" v-model="form.phone" name="phone" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('phone') }">
<has-error :form="form" field="phone"></has-error>
</div>
</div>
<div class="row mb-2">
<label for="" class="col-md-3 font-weight-bold">Address</label>
<div class="col-md-9">
<input type="text" v-model="form.address" name="address" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('address') }" >
<has-error :form="form" field="address"></has-error>
</div>
</div>
<div class="mb-5">
<input type="button" class="btn btn-sm btn-danger float-left" #click="clearCart" value="Clear" />
<button type="submit" :disabled="form.busy" class="btn btn-sm btn-success float-right" #click="store">Checkout</button>
</div>
<table class="table table-sm table-bordered table-striped">
<thead class="text-center">
<tr>
<th>ID</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
<th>L/T</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(cart, i) in carts" :key="i">
<td class="text-center"><input type="hidden" name="pro_id[]" v-model="form.pro_id"> {{cart.id}}</td>
<td>{{cart.name}} </td>
<td class="text-right" name="qty"><input type="hidden" name="qty[]" v-model="form.qty">{{cart.qty}}</td>
<td class="text-right" name="unit_price"><input type="hidden" name="pro_id[]" v-model="form.price">{{cart.price}}</td>
<td class="text-right">{{cart.price*cart.qty}}</td>
<td class="text-center"><button type="button" #click="removeProduct(i)" class="btn btn-sm btn-danger">x</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text-right font-weight-bold">Total =</td>
<td class="text-right"> {{total}}/-</td>
</tr>
</tfoot>
</table>
</form>
</div>
<vue-progress-bar></vue-progress-bar>
<vue-snotify></vue-snotify>
</div>
<script>
export default {
data(){
return{
field: 'name',
query: '',
form: new Form({
'name': '',
'phone': '',
'address':'',
'pro_id' : [],
'qty' : [],
'unit_price' : []
}),
products:[],
carts:[],
pagination:{
current_page: 1
}
}
},
methods:{
store(){
var data = {
carts: this.carts,
}
this.$Progress.start()
this.form.busy = true
this.form.post('api/pos', data)
.then( res => {
this.form.reset()
this.form.clear()
this.$Progress.finish()
console.log(data)
})
.catch( e => {
this.$Progress.fail()
console.log(e)
})
}
}
}
</script>
Here is API Controller Function:
public function store(Request $request)
{
$carts = json_decode($request->getContent('data'), true);
$this->validate($request,[
'name' => 'required',
'phone' => 'required',
'address' => 'required'
]);
$order = new OrderMaster;
$order->name = $request->name;
$order->phone = $request->phone;
$order->address = $request->address;
$order->save();
$order_id = DB::getPdo()->lastInsertId();
foreach ($carts as $cart) {
OrderDetails::create([
'order_id' => $order_id,
'product_id' => ?,
'qty' => ?,
'unite_price' => ?,
]);
}
}

Answer 1

First, you're calling form.post wrong. Second parameter is not additional data, but config options for axios.request call.
In order to send carts array you should add it to the form itself:
form: new Form({
'name': '',
'phone': '',
'address':'',
'pro_id' : [],
'qty' : [],
'unit_price' : [],
'carts' : [], // <-- added
}),
Then, replace usage of carts with form.carts in your template (and methods).
Now, carts will be sent to the server along with other data.
And lastly, you don't need to use json_decode at all.
//...
$data = $this->validate($request, [
'name' => 'required',
'phone' => 'required',
'address' => 'required',
'carts' => 'required|array',
'carts.*.name' => 'string',
'carts.*.id' => 'integer',
'carts.*.qty' => 'integer',
'carts.*.price' => 'numeric',
]);
Then, you can use $data as a source of data.
foreach ($data['carts'] as $cart) {
OrderDetails::create([
'order_id' => $order_id,
'product_id' => $cart['id'],
'qty' => $cart['qty'],
'unite_price' => $cart['price'],
]);
}

Answer 2

I had been done it in other way. Not using vform i used axios. but i want to done it using vform.
return{
field: 'name',
query: '',
form:{
'name': '',
'phone': '',
'address':''
},
products:[],
carts:[],
pagination:{
current_page: 1
}
}
store(){
let client = {
cli: this.form
}
let data = {
carts: this.carts
}
this.$Progress.start()
axios.post('api/pos', {data, client})
.then( res => {
this.$Progress.finish()
console.log(res)
})
.catch( e => {
this.$Progress.fail()
console.log(e)
})
}
Controller:
$carts = json_decode($request->getContent('client','data'), true);
$customer = $carts['client'];
$pro_info = $carts['data'];
foreach ($customer as $cus) {
$order = new OrderMaster;
$order->name = $cus['name'];
$order->phone = $cus['phone'];
$order->address = $cus['address'];
$order->save();
}
$order_id = DB::getPdo()->lastInsertId();
foreach ($pro_info as $cart) {
foreach ($cart as $c) {
OrderDetails::create([
'order_id' => $order_id,
'product_id' => $c['id'],
'qty' => $c['qty'],
'unit_price' => $c['price'],
]);
}
}