How can updating children components in table using livewire?

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.