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

我想使用vuejs by api与laravel建立一个发票系统。首先显示所有产品，当我点击添加到购物车时，它被添加

以下是截图：

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

但是我不能传递全部数据。有时传递客户信息，但不传递购物车数据

注意：我正在使用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>

---

首先，您调用的是

form.post

错误。第二个参数不是附加数据，而是

axios.request

call的配置选项

要发送

购物车

数组，应将其添加到表单本身：

表单：新表单({
“姓名”：“，
“电话”：“，
“地址”：“，
“pro_id”：[]，
“数量”：[]，
“单价”：[]，
“carts”：[]，//首先，您调用的是
form.post
错误。第二个参数不是附加数据，而是
axios.request
调用的配置选项

要发送
购物车
数组，应将其添加到表单本身：

表单：新表单({
“姓名”：“，
“电话”：“，
“地址”：“，
“pro_id”：[]，
“数量”：[]，
“单价”：[]，
“carts”：[]，//我是用另一种方式完成的。我没有使用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'],
            ]);
        }
    }

我是用另一种方式做的。不是用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'],
            ]);
        }
    }

@MizanurRahman应该行得通。也许你会分享更多信息？@MizanurRahman应该行。也许你会分享更多信息？