如何在 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

为了以防万一这对其他人有帮助，我发现如果从 dom 中删除 Livewire 组件中的 alpine 组件，则在恢复时无法正确加载 *如果 x-data指令应用于最外层的元素。

因此，例如，只需将 <x-success-alert> 组件包装在一个额外的 div:

中

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

Answer 2

解决方案是通过将 wire:key 添加到运行dom 值来强制 Livewire 再次在 dom 中添加该元素。

<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>

通过这种方式，Livewire 将销毁旧的 dom 元素并添加新的 re-init Alpine 组件。

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

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

initialization

laravel

laravel-livewire

alpine.js