Livewire render function doesn't automatically update on browserEvent

Question

I just started learning Livewire and I am making a page to purchase books and add them to cart.

I made two Livewire components, one for the books and one for the cart. When I click purchase book everything works perfect and it was automatically added to the cart, but the problem is the cart doesn't update automatically and I need to reload the page to see the added books.

The books component:

class Book extends Component
{

    public $book,$price;

    protected $listeners = ['purchase' => 'incrementPrice'];

    public function render()
    {
        return view('livewire.book', [
            'books'=> Books::orderBy('id','asc')->get(),
            'purchases'=> Books::where('purchased',1)->paginate(20)
        ]);


    }

    public function purchase($id)
    {
        $book = Books::find($id);

        $book->purchased = 1;
        $book->save();

        if($book->save())
        {
            $this->dispatchBrowserEvent('bookPurchased');
        }
    }

    public function cancel($id)
    {
        $book = Books::find($id);

        $book->purchased = 0;
        $book->save();

        
    }


    public function OpenModal()
    {
        
        $this->emit('OpenModal');
    }


    public function incrementPrice()
    {
        $this->total = $price;
    }
    }

The book Livewire component:

      
    
    
    
    
    @foreach( $books as $book )
        
    
    
        
        {{ $book->book }}
         ${{ $book->price }} 
             @if(  $book->purchased == 0  )
        Purchase
             @else
        Purchase
        cancel
             @endif
        
    
    
        
         @endforeach
        
    
    
        @livewire('cart')

This is my View:

     
    
    
        
        
        
        books
    
        
    
        @livewireStyles
    
    
    
    


    
        @livewire('book')
    
        
    
    
    
    
    
    
    @livewireScripts

The cart component:

         Books::where('purchased',1)->get()
            ]);
        }
    }

And this is the Cart Livewire component I am using as a modal:

        
    
      
        
          
            CART
            
          
          
              @foreach( $purchases as $purchase )
                
                    
                    
                        {{ $purchase->book }}
                        ${{ $purchase->price }}
                    
                    

                    
                
                @endforeach

Prospero · Accepted Answer

you can use events for achieve it. Once you save the book, emit an event to Cart component to refresh it.

//book component...
...
  $book->save();
  $this->emit('cartRefresh');
...

//cart component
protected $listeners = ['cartRefresh' => '$refresh']; //it's going to re-render the component

Livewire render function doesn't automatically update on browserEvent

Answers (1)

Related Questions

Livewire render function doesn&#39;t automatically update on browserEvent

Answers (1)

Related Questions

Livewire render function doesn't automatically update on browserEvent