Component not auto re-rendering after performing any action

Question

commerce app in laravel livewire3, cart component data not updating after perform any action like updateQty, removeItem etc.

I want to auto update cart itmes values after perform any action.

Cart.php

class Cart extends Component
{
    public $cartItems = [];

    public $sub_total = 0;

    public function mount(){
       $this->cartItems = CartManagement::getCartItemsFromCookies();
       $this->sub_total = CartManagement::calculateGrandTotal($this->cartItems);
    }

    public function removeItem($slug){
        CartManagement::removeCartItem($slug);
        $data = ['type' => 'success', 'message' => 'Item removed successfully.'];
        $this->dispatch('update-cart',data:$data);
    }

    public function increaseQty($slug){
        CartManagement::incrementQuantityToCartItem($slug);
        $data = ['type' => 'success', 'message' => 'Item quantity increased successfully.'];
        $this->dispatch('update-cart',data:$data);
        $this->dispatch('refreshThis');
    }

    public function decreaseQty($slug){
        CartManagement::decrementQuantityToCartItem($slug);
        $data = ['type' => 'success', 'message' => 'Item decreased decreased successfully.'];
        $this->dispatch('update-cart',data:$data);
    }

    public function clearCart(){
        CartManagement::clearCartItems();
        $data = ['type' => 'success', 'message' => 'All items removed successfully.'];
        $this->dispatch('update-cart',data:$data);
    }

    public function refreshThis() {
        $this->render();
    }

    public function render()
    {
        return view('livewire.partials.cart');
    }
}

cart.blade.php
the below code is front end blade view from where i am performing actions.

@foreach ($cartItems as $crt)
    <tr :key="{{ $crt['slug'] }}">
            <td class="border p-2">
                    <img class="h-10 w-10 inline-block" src="{{ env('APP_URL').'storage/'.$crt['image'] }}" alt="{{ $crt['title'] }}">
                    <span>
                            {{ $crt['title'] }}
                    </span>
            </td>
            <td class="border text-center">{{ number_format($crt['unit_amount'],2)  }}</td>
            <td class="border mx-auto">
                    <div class="flex justify-center">
                            <button wire:click="decreaseQty('{{ $crt['slug'] }}')" wire:loading:attr="disabled" class="bg-primary text-white text-xs px-3">-</button>
                            <input type="text" value="{{ $crt['quantity'] }}" class="bg-secondary text-black text-xs border-none text-center w-10" readonly>
                            <button wire:click="increaseQty('{{ $crt['slug'] }}')" wire:loading:attr="disabled" class="bg-primary text-white text-xs px-3">+</button>

                    </div>
            </td>
            <td class="border text-center">{{ number_format($crt['total_amount'],2) }}</td>
            <td class="border text-center">
              <button wire:click="removeItem('{{ $crt['slug'] }}')" wire:loading:attr="disabled" class="bg-primary text-white text-xs px-2 py-1">
                    <i class="fa-solid fa-trash"></i>
                    Remove
            </button>      
            </td>
    </tr>
@endforeach

Looking forward for help, thanks in advance.

Answer 1

Everytime a call to the backend is done, the render() method is called automatically (if you do not provide it explicitly, a default render is done), so you do not need the refreshThis() method.

The main problem in your code is that you have set the ':key="{{ $crt['slug'] }}"` attribute in the <tr> tag but in Livewire 3 it must be "wire:key":

<tr wire:key="cart-{{ $crt['slug'] }}">

note that I've also added the cart- prefix to avoid conflicts with other wire:key in the same page. Here the wire:key documentation

Instead, the :key attribute is needed for subcomponents rendered into loops (here you can find the documentation)