从 Livewire eventDispatch 发送消息到 Alpine.js

Question

我有一个使用 Livewire 和 Alpine.js 的 Tailwind 警报，当使用事件模式关闭

保存新项目时显示

<div class="alert alert-success" style="display: none;" x-data="{ show : false }" x-show="show" x-on:close-modal.window="show = true">
    <p class="text-bold text-"><b>The project has been created successfully</b></p>
    <button @click="show = false" class="flex items-center p-1 ml-auto focus:outline-none">
        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
            <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z">
            </path>
        </svg>
    </button>
</div>

我有一个 Livewire 组件可以触发模态关闭事件。

public function save()
{
    // Validating the data
    $this->validate();

    $this->dispatchBrowserEvent('close-modal', ['message' => 'Project Created']);
}

我想要的是能够在警报中显示我用 dispatchBrowserEvent 发送的消息，而不是固定消息 “项目已成功创建。” 不幸的是，我还没有想出如何做到这一点。

我尝试在 p 标签上使用 x-text="message"，但它显示

message is not defined.

Answer 1

您需要使用 x-on:close-modal

监听该事件

<div x-data="{ show : false, message: '' }" 
     x-show="show" 
     x-on:close-modal.window="show = true; message = $event.detail.message">

    <p x-text="message"></p>

</div>

注：我按照你问题中的要求做了。但我不认为您会在关闭模式时看到文本，并且 p 在其中。

如果我可以建议另一种方法是发送第二个事件

$this->dispatchBrowserEvent('notify', ['message' => 'Project Created']);

并有一个可重复使用的烤面包机来使用相同的方法显示通知。
（这是一个简单的例子）

<div x-data="{ show: false, message: '' }" 
     x-show="show" 
     x-on:notify.window="message = $event.detail.message"; setTimeout(() => { message = ''; show = false }, 2500)">

    <p x-text="message"></p>

</div>

从 Livewire eventDispatch 发送消息到 Alpine.js

Sending a message from Livewire eventDispatch to Alpine.js

javascript

laravel

tailwind-css

laravel-livewire

alpine.js