How to re-init the AlpineJS component after Livewire re-renders?

Question

I have an alert component that I hide using AlpineJS but I want it to be visible again after Livewire re-renders.

Showing the alert using Livewire component

@if(Session::has('success'))
    <x-success-alert :message="Session::get('success')" />
@endif

AlpineJS component

<div x-data="{show: true}">
    <div x-show="show">
        <span>{{ $message }}</span>
        <button @click="show = false">&times;</button>
    </div>
</div>

you can't, a component is initialized only once.

jade
– jade

2022-02-13 10:32:35 +00:00
Commented Feb 13, 2022 at 10:32 — jade
– jade, Commented Feb 13, 2022 at 10:32

Mohamed Abdallah · Accepted Answer · 2022-05-01 17:18:16Z

28

The solution is to force Livewire to add that element in the dom again by adding wire:key to a random value.

<div wire:key="{{ rand() }}">
    <div x-data="{show: true}">
        <div x-show="show">
            <span>{{ $message }}</span>
            <button @click="show = false">&times;</button>
        </div>
    </div>
</div>

With that way, Livewire will destroy the old dom element and add the new one which re-init the Alpine component.

answered May 1, 2022 at 17:18

Mohamed Abdallah

1,0341 gold badge9 silver badges21 bronze badges

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

5 Comments

cby016 Over a year ago

This was helpful but I changed it up a bit. I used md5 and json_encode to check to see if the data had actually changed: wire:key="{{ md5(json_encode($message)) }}"

aurawindsurfing Over a year ago

This is the best answer imho

Ilesanmi John Over a year ago

I used this and it caused another element to be duplicated after each component re-init. any other idea?

Mohamed Abdallah Over a year ago

wire:key doesn't effect other elements, the issue might not be with that.

shahsani Over a year ago

I totally forgot to add the key to the loop items. Thanks for reminding!

Alex Currie-Clark · Accepted Answer · 2022-03-04 10:02:42Z

0

Just in case this helps anyone else, I have found that if an alpine component within a Livewire component is removed from the dom, it is not loaded correctly if reinstated *if the x-data directive is applied to the outermost element.

So, for example, just wrap the <x-success-alert> component in an additional div:

<div>
    <div x-data="{show: true}">
        <div x-show="show">
            <span>{{ $message }}</span>
            <button @click="show = false">&times;</button>
        </div>
    </div>
</div>

answered Mar 4, 2022 at 10:02

Alex Currie-Clark

6589 silver badges9 bronze badges

1 Comment

burf Over a year ago

Although I couldn't see how is this relevant to the question asked... thanks for the insight. BTW Have you noticed the same behavior with wire:key too?

Collectives™ on Stack Overflow

How to re-init the AlpineJS component after Livewire re-renders?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related