如何将数组数据从vuejs传递到laravel api控制器

Question

我想用api使用vuejs制作带laravel的发票系统。首先显示所有产品，当我点击添加到购物车时，它添加。

这是截图：

现在我想将输入填充数据发送到order_masters表并包括最后插入的ID cart数据发送order_details表。

但我无法通过整个数据。有时传递客户信息但不传递购物车数据。

N. B：我正在使用vuejs，vform和API

我的组件代码如下：

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

这是API控制器功能：

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

首先，你称form.post错了。第二个参数不是附加数据，而是axios.request调用的配置选项。

要发送carts数组，您应该将其添加到表单本身：

form: new Form({
  'name': '',
  'phone': '',
  'address':'',
  'pro_id' : [],
  'qty' : [],
  'unit_price' : [],
  'carts' : [], // <-- added
}),

然后，在模板（和方法）中用carts替换form.carts的用法。

现在，carts将与其他数据一起发送到服务器。

最后，你根本不需要使用json_decode。

//...
$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',
]);

然后，您可以使用$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

我是以其他方式完成的。不使用vform我使用了axios。但我想用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)
            })

    }

控制器：

$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'],
            ]);
        }
    }