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:
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?
Please or to participate in this conversation.