Livewire重新渲染后如何重新初始化AlpineJS组件？

Question

我有一个使用 AlpineJS 隐藏的警报组件，但我希望它在 Livewire 重新渲染后再次可见。

使用 Livewire 组件显示警报

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

AlpineJS 组件

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

Answer 1

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.