javascript - alpine table 处理请求参数

Question

我正在按照这种方法制作动态表：https : //codepen.io/sanjayojha/pen/qBONdVm，用于数据透视表 order_service

表
订单（id、vat、total、without_vat）

服务（id、name、prive）

项目（ID，名称）

order_service（order_id、service_id、item_id、数量、金额）

我想将数据插入到 ordre_service 表中，但我无法处理请求参数

order_service.blade.php

<div class="row" x-data="handler()" >
    <div class="col">
        <table class="table table-bordered align-items-center table-sm" id="order_services">
            <thead class="thead-light">
            <tr>
                <th>#</th>
                <th>{{__('Services')}}</th>
                <th>{{__('Items')}}</th>
                <th>{{__('Quantity')}}</th>
                <th>{{__('Amount')}}</th>
                <th>Remove</th>
            </tr>
            </thead>

           
            <tbody>
         
            <template x-for="(field, index) in fields" :key="index">
                <tr>
                    <td x-text="index + 1"></td>

                    <td>
                        <select x-model="field.service_id" type="text"
                                name="service_id[]"
                               
                                class="input">
                        @foreach(\App\Models\Service::all() as $service)
                                <option value="{{$service->id}}" >{{$service->name}}</option>
                            @endforeach
                        </select>
                    </td>
                    <td> <select x-model=field.item_id" type="text"


                                 name="item_id[]"
                             

                                 class="input">
                            @foreach(\App\Models\Item::all() as $item)
                                <option value="{{$item->id}}" >{{$item->name}}</option>
                            @endforeach
                        </select></td>
                    <td><input x-model="field.quantity" type="text"
                               name="quantity[]"

                               
                               class="input"></td>
                    <td><input x-model="field.amount" type="text"
                               name="amount[]"
                           
                               class="input"></td>
                    <td><button type="button" class=" btn-delete" @click="removeField(index)">&times;</button></td>

                
            </template>
                <button>Submit</button>
            </form>
            </tbody>
            
            <tr>
                <td colspan="4" class="text-right"><button type="button" class="btn" @click="addNewField()">+ {{__('Add Row')}}</button></td>
            </tr>
           
        </table>
    </div>
</div>



<script>
   
   function handler() {
       return {
           id: '{{count($serviceOrders)}}',
           serviceName: '',
           itemName: '',
           amountName: '',
           quantityName: '',

            fields: [
            
            ],
            addNewField() {
                this.fields.push({
                    id: this.id++,
                    service_id: '',
                    item_id: '',
                    quantity: '',
                    amount:''

                });
            },
            removeField(index) {
                this.fields.splice(index, 1);
            }
        }
    }
</script>

订单控制器：

public function store(Request $request)

    {

            $data = $this->validate($request,[

            'without_vat'=> 'required',
            'total' => 'required',
            'vat' => 'required',


        ]);

    
               $order= Order::create($data);
   $service = $this->validate($request, [
                    'item_id' => 'required',
                    'service_id' => 'required',
                    'quantity' => 'required',
                    'amount' => 'required',

                ]);
           $order->services()->attach($service);

插入订单表后尝试了这个 dd：

 dd($request->serviceOrders);

输出：

null

dd($request) 只显示订单参数的请求，而不是 order_service

我该如何解决？有人可以帮忙吗？

标签： javascriptphphtmllaravel