Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

SigalZ's avatar

Livewire nested component and input array how to

I need some help with Livewire components.

I have 2 tables:

orders and order_items.

I want to have a blade file with tabs that display orders with different statuses.

For example: new orders, orders to pack, orders to dispatch etc.

Each order status view will have different functionalities and displays, so it can't be on the same blade.

I created a component called: OrderComponent that calls a blade file with the tabs.

Each tab will call a livewire component getting the orders with the different statuses.

For example:

 <x-tabs>
       <x-slot:tab_list> 
           <x-tab-list-item :active="$selectedTab == 0" selectedTab="0" name="New" href="new-orders" />
           <x-tab-list-item :active="$selectedTab == 1" selectedTab="1" name="To Pack" href="to-pack" />
           <x-tab-list-item :active="$selectedTab == 2" selectedTab="2" name="To Dispatch" href="to-dispatch" />
           <x-tab-list-item :active="$selectedTab == 3" selectedTab="3" name="Dispatched" href="dispatched" />
           <x-tab-list-item :active="$selectedTab == 4" selectedTab="4" name="Pending" href="pending" />
       </x-slot:tab_list>
       
       <x-slot:tab_items>
           <div class="tab-pane fade @if($selectedTab == 0) active show @endif" id="new-orders" role="tabpanel" aria-labelledby="new-orders">
               <livewire:admin.order.new-orders-component />
           </div>
           <div class="tab-pane fade @if($selectedTab == 1) active show @endif" id="to-pack" role="tabpanel" aria-labelledby="to-pack">
            <livewire:admin.order.orders-to-pack-component />
           </div>
           <div class="tab-pane fade @if($selectedTab == 2) active show @endif" id="to-dispatch" role="tabpanel" aria-labelledby="to-dispatch">
            <livewire:admin.order.orders-to-dispatch-component />
           </div>
           <div class="tab-pane fade @if($selectedTab == 3) active show @endif" id="dispatched" role="tabpanel" aria-labelledby="dispatched">
            <livewire:admin.order.dispatched-orders-component />
           </div>
           <div class="tab-pane fade @if($selectedTab == 4) active show @endif" id="pending" role="tabpanel" aria-labelledby="pending">
            Pending          
           </div>
       </x-slot:tab_items>
    </x-tabs>

On the new-orders component I ran on the order->items like this:

<div class="table-responsive">
                        <table class="table table-bordered table-sm">
                            <thead>
                                <tr>
                                    <th>Coffee</th>
                                    <th>Grind</th>
                                    <th>Weight</th>
                                    <th>Qty</th>
                                    @can('edit orders')
                                    <th></th>                                   
                                    @endcan
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($order->orderItems as $item)                               
                                <livewire:admin.order.order-item-component :orderItem="$item" :key="$item->id" />
                            @endforeach
                            </tbody>
                        </table>

For each order item I want to give the user the option to update the order-item.qty and order-item.prep_method, separately, so I created another livewire component for order-item.

That's causing problems as the item component tries to get the inputs from the new-orders-compnent instead of the order-item-component.

You can see these issues here:

https://laracasts.com/discuss/channels/livewire/nested-livewire-component-tries-to-get-properties-from-parent

So I was thinking instead of creating a component for each order item just leave it on the new-orders-component, but I don't know how to implement the update of each item's qty and prep_method.

I think maybe the component will have to have an array like this:

public $orderItems

but how do I populate it? and how do I update each item's qty and prep_method?

I'm very confused and I hope I explain my question properly.

Please, can someone help?

0 likes
0 replies

Please or to participate in this conversation.