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

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>

webrobert

4 years ago

Level 51

Here is a sample. I think this is what you're looking for...

in the main layout at the bottom...

 <x-app-toaster-notification />

inside the component...

<div
    x-cloak
    x-data="{
        isOpen : false,
        type : 'success',
        messageText: '',
        showNotification(message, type){
            this.type = type
            this.isOpen = true
            this.messageText = message
            setTimeout(() => {
                this.isOpen = false
            }, 5000)
        }
    }"
	// can show a notification via javascript...
    @notify.window="showNotification($event.detail.message, $event.detail.type)"
	
    // can show a notification via session variable being present...
@if( session('app_toaster') )
    x-init="$nextTick(() => showNotification('{{ session('app_toaster')['message'] }}', '{{ session('app_toaster')['type'] }}'))"
@endif
    x-show="isOpen"

 ...

aurawindsurfing

3 years ago

Level 50

Hey bit late to the discussion but simply put

wire:key="{{ rand() }}"

in your div and it will force component to be rerendered and alpinejs will work as expected

1 like

MohamedTammam

3 years ago

Level 51

@aurawindsurfing LOL, you just commented on my answer on StackOverflow for the same question 😂

https://stackoverflow.com/questions/71099094/how-to-re-init-the-alpinejs-component-after-livewire-re-renders/72078906?noredirect=1#comment129195923_72078906

aurawindsurfing

3 years ago

Level 50

@MohamedTammam Yes since it is the best answer ;-)

1 like

shay1591

1 year ago

Level 1

@aurawindsurfing

Sorry for the late reply but I'm having the same issue. I used wire:key"{{rand()}}" and this indeed works but only once, So after a page refresh, when the livewire component data is updated my livewirecomponent will indeed be visible, but any subsequent data updates won't make the component visible anymore. How to fix this?

Please or to participate in this conversation.