Livewire & Laravel 8: updating global components

Question

I’m fairly new to the components & livewire game so I’m getting very confusing when I need to update a component value from other sources. Let me explain:

I’m using a default Laravel 8 installation with Livewire - no JetStream.

My navigation file (the default one that comes with the installation) has 3 individual components containing: total of points achieved, total of lives and remaining lives.

Loads like:

<x-points>0</x-points>

<x-lifes>0</x-lifes>

<x-remaining-lifes>0</x-remainung-lifes>

My question: how do I update any of those components when I execute actions from different sources like:

user answer a question (file Answer.php)
User clicks on an action at the footer of my application (let’s call this Regenerate.php)
User request tips so I need to subtract (Tips.php)

itepifanio · Accepted Answer · 2021-08-29 12:31:33Z

1

I would change your three main blade components for livewire componentes:

<livewire:points></livewire:points>

<livewire:lifes></livewire:lifes>

<livewire:remaining-lifes></livewire:remaining-lifes>

So for example, let's create the points and answer components.

// Points.php livewire component

public int points = 0;

public $listeners = ['loadUserPoints'];

public function render() { ... }

public function loadUserPoints()
{
     $this->points = user()->points()->sum('total');
}

// points.blade.php livewire component

<div wire:init="loadUserPoints">{{ $points }}</div>

Now let's abstract the answer component.

// answer livewire component (very abstracted)

public function save()
{
     user()->answers()->create($this->data);

     // this will be listened by the points component
     // that will run its query and update your frontend
     $this->emit('loadUserPoints');
}

So livewire works mainly for events, you have to use it to pass data cross multiple components. To update your frontend as an SPA you're not gonna use blade components, you have to use livewire component or a lot of javascript to handle the DOM.

answered Aug 29, 2021 at 12:31

itepifanio

5676 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Filipe Over a year ago

Thank you! That's kinda what I did. I've been asking myself when to use <livewire:points></livewire:points> vs <x-points />?

itepifanio Over a year ago

In my projects the laravel blade components that I use is most for static behavior, like inputs, dropdowns, this kind of stuff. I use livewire when the user expects a SPA behavior like a ecommerce cart, some filter/search on the page, etc.

Collectives™ on Stack Overflow

Livewire & Laravel 8: updating global components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related