Search code examples
laravellaravel-livewire

Liveware component not updating whole DOM

I have a laravel component that switches to multiple views. Imagine I have these 2 views:

View 1

<div class='progress-bar'>
<h1>View 1</h1>

View 2

<div class='progress-bar'>
<h1>View 1</h1>

On a button click, the component changes from View 1 to View 2. Now the progress bar in there is using a css animation to load itself, but since the DOM code is very similar, the progress bar doesn't change, and even after a view change, the progress bar retains its position rather than resetting.

I want the progress bar to reset too.

If I change the markup of the progress bar in any way like:

View 2

<div>
    <div class='progress-bar'>
</div>
<h1>View 1</h1>

That fixes the problem, but I'd prefer not to do that.

Anyway I can force liveware to render everything in the other view from scratch?

Solution

  • Giving it an id, or a wire:key as pointed out by Clement does the trick.