laravel - 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?

标签： laravellaravel-livewire

Answer 1

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');
    }
}