Livewire flash 消息仅在执行操作时出现一次

Question

大家好，我只想知道如何在每次执行操作时都显示一条闪现消息。我的 blade 中有一个类别 table，在每一行的末尾都有一个删除按钮，当我按下它时，操作成功执行并且我的闪存消息显示为弹出窗口 (SweetAlert2) 但是当我删除了另一行，删除功能运行成功，但弹出窗口不再出现。

在我的blade

@if(session()->has('process-error')) 
<script>
    Swal.fire(
        'Error',
        '{{ session('process-error') }}',
        'error'
    )
</script>
@endif
@if(session()->has('process-success'))
    <script>
        Swal.fire(
            'Success',
            '{{ session('process-success') }}',
            'success'
        )
    </script>
@endif

在我的组件中

    public function delete($id)
    {
        $categoriesService = CategoriesService::deleteCategory($id);

        if(!$categoriesService)
        {
            // RETURN AN ERROR MESSAGE
            session()->flash('process-error' , 'Failed to delete the category');
            return;
        }

        // RETURN A SUCCESS MESSAGE
        session()->flash('process-success' , 'Category deleted successfully!');
    }

Answer 1

如果你已经安装了Swall，你不需要通过session()->flash()显示它。您可以发送一个 js 事件并像

一样捕获它

if(!$categoriesService)
{
   // RETURN AN ERROR MESSAGE
   $this->dispatchBrowserEvent('process-swall',['type' => 'error']);
   return;
}

// RETURN A SUCCESS MESSAGE
   $this->dispatchBrowserEvent('process-swall' ,['type' => 'success']);
}

 //in script section

<script>
   window.addEventListener('process-swall', event => {
       let type = event.detail.type;
       let message = type === 'success' ? 'Category deleted successfully!' : 'Failed to delete the category';
       let camelCaseType = type === 'success' ? 'Success' : 'Error';
       Swal.fire(
            camelCaseType,
            message,
            type
        )
   })
</script>

Answer 2

我会说你最好分派 browser-event 并在 JavaScript 中收听它，而不是使用会话。请求之间的会话可能有点棘手，因为 Livewire 实际上是无状态的 API.

当使用dispatchBrowserEvent()时，您可以将数据作为第二个参数传入，它将在事件的event.detail 属性中可用。

public function delete($id)
{
    $categoriesService = CategoriesService::deleteCategory($id);

    if (!$categoriesService) {
        $swalData = [
            'type' => 'error',
            'title' => 'Error',
            'message' => 'Failed to delete category',
        ];
    } else {
        $swalData = [
            'type' => 'success',
            'title' => 'Success',
            'message' => 'Sucessfully deleted category',
        ];
    }
    $this->dispatchBrowserEvent('notify-swal', $swalData);
}

然后 - 在您的 blade 中（可能会建议在您的布局中，这样它可以在所有组件中重复使用），为该事件添加一个侦听器。

@once
    <script>
        window.addEventListener('notify-swal', function(e) {
            let data = e.detail;
            let title = data.title;
            let message = data.message;
            let type = data.type; 
            
            Swal.fire(title, message, type);
        });
    </script>
@endonce

Livewire flash 消息仅在执行操作时出现一次

Livewire flash message appears only once when action if performed

laravel-livewire