How can updating children components in table using livewire? - laravel

Question

I have problem with nesting component when changing the children parent is refresh and its ok, but when I add same product in CartItem by using barcode the quantity dose not change in child component
this my parent Component including a table
parent.blade.php >>>
<table class="table mb-0">
<thead>
<tr>
<th scope="col">product</th>
<th>price</th>
<th>quantity</th>
</tr>
</thead>
<tbody>
#foreach ($cartItems as $item)
<tr>
<td>{{$item['name']}}</td>
<td>{{Cart::session(auth()->id())->get($item['id'])->getPriceSum()}}</td>
<td>
<livewire:child :item="$item" wire:key="$item['id']"/>
</td>
</tr>
#endforeach
</tbody>
</table>
and this id parent.php
class Parent extends Component
{
public $service = null;
public $cartItems = [];
protected $listeners = ['cartUpdated' => 'onCartUpdate'];
public function mount()
{
$this->cartItems = \Cart::session(auth()->id())->getContent()->toArray();
}
public function onCartUpdate()
{
$this->mount();
}
public function render()
{
$this->mount();
return view('livewire.parent');
}
}
the child component in <td> just have an input with livewire:model
<div>
<input type="number" wire:model="quantity" wire:change="updateCart"><span class="col-9"></span>
</div>
My Child.php
class Child extends Component
{
public $item;
public $quantity;
public function mount($item)
{
$this->item = $item;
$this->quantity = $item['quantity'];
}
public function updateCart()
{
\Cart::session(auth()->id())->update($this->item['id'], [
'quantity' => array(
'relative' => false,
'value' => $this->quantity,
),
]);
$this->emit('cartUpdated');
}
public function render()
{
return view('livewire.child');
}
}
I think this return to mount() method in child. can I updating quantity every time?

Answer 1

There is a way you can make child components reactive. Just use now() or random number as a key, as follows:
<livewire:child :item="$item" key="{{now()}}"/>
This my question in GitHub
It's also good to see this tricky way that helped me.

Answer 2

Instead of calling the onCartUpdate method. Try using $refresh in your $listeners:
protected $listeners = ['cartUpdated' => '$refresh'];

Answer 3

You're not utilizing data-bindings properly. You don't need to add wire:change, since you already have wire:model -- you can simply listen for changes to that property.
Even better, just use one property $item and access the quantity from that.
<div>
<input type="number" wire:model="item.quantity" /> <span class="col-9"></span>
</div>
Then use the "magic" method updatedItemQuantity() to listen for updates to the quantity attribute on the $item property.
class Child extends Component
{
public $item;
protected $rules = [
'item.quantity' => 'required|numeric|min:0',
];
public function mount($item)
{
$this->item = $item;
}
public function updatedItemQuantity($quantity)
{
\Cart::session(auth()->id())->update($this->item['id'], [
'quantity' => array(
'relative' => false,
'value' => $quantity,
),
]);
$this->emit('cartUpdated');
}
public function render()
{
return view('livewire.child');
}
}
Now in your parent, you can simply use the "magic" event $refresh,
class Parent extends Component
{
public $service = null;
public $cartItems = [];
protected $listeners = ['cartUpdated' => '$refresh'];
public function mount()
{
$this->cartItems = \Cart::session(auth()->id())->getContent()->toArray();
}
public function render()
{
return view('livewire.parent');
}
}