blade 组件烤面包机通知的 Alpine 问题

Question

在我的项目中，我使用 Laravel 8、Livewire 和 Alpine.js。

我的 livewire 烤面包机代码 (app\Http\Livewire\ToasterNotification.php):

<?php
    
namespace App\Http\Livewire;
    
use Livewire\Component;
    
class ToasterNotification extends Component
{
    public $notifications = array();
    protected $listeners = ['notificationUpdate', 'notificationRemove'];
    
    public function notificationUpdate($notif)
    {
        array_push($this->notifications, $notif);
        $this->dispatchBrowserEvent('toast-message-show');
    }
    
    public function notificationRemove($id)
    {
        unset($this->notifications[$id]);
    }

    public function render()
    {
        return view('livewire.toaster-notification');
    }
}

执行此 blade (resources\views\livewire\toaster-notification.blade.php) 并且他将在“x-toaster”上调用名为 toaster 的 blade 组件：

<div
    wire:poll.5s
    aria-live="polite"
    aria-atomic="true"
    style="z-index:1200; position: absolute; top: 70px; right: 20px; min-height: 200px;"
>
    @foreach($notifications as $i => $notification)
        <x-toaster id="{{ $i }}" message="{{ $notification['message'] }}" color="{{ $notification['color'] }}"/>
    @endforeach
</div>

(resources\views\components\toaster.blade.php):

<div
    class="toaster toastAlert show border-{{ $color }}"
    style="min-width: 250px"
    data-autohide="false"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    id="toastAlert{{ $id }}"
>
    <div class="toast-header">
        <svg class="bd-placeholder-img rounded mr-2 bg-{{ $color }}" width="20" height="20" focusable="false" role="img">
            <rect width="100%" height="100%" fill="#ffffff00"></rect>
        </svg>
        <strong class="mr-auto">{{ $message }}</strong>
        <button type="button" class="ml-2 mb-1 close" wire:click="notificationRemove({{ $id }})">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>

我想改进每 5 秒重新加载一次的旧系统，并在可能的情况下沿 livewire 使用 alpine。实际上我的代码是这样的：

<script defer src="https://unpkg.com/alpinejs@3.9.0/dist/cdn.min.js"></script>

<style> [x-cloak] { display: none !important; } </style>
    
<div
    x-data="{show:false}"
    @toast-message-show.window="
        show = true;
        setTimeout(() => show=false, 5000);
    "
    x-show="show"
    x-cloak
>
    @foreach($notifications as $i => $notification)
        <x-toaster id="{{ $i }}" message="{{ $notification['message'] }}" color="{{ $notification['color'] }}"/>
    @endforeach
</div>

但是我没有显示。我认为存在一个问题，因为在 foreach 中没有执行任何操作。我尝试添加一些测试消息，例如

<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>

但没有任何结果。

Answer 1

好的，我找到了答案，它很乱，但我不得不删除样式并将 src 放在 blade 应用程序中。

blade 组件烤面包机通知的 Alpine 问题

Alpine issues with blade component toaster notification

php

laravel

laravel-livewire

alpine.js

laravel-8