为什么模态在 laravel livewire 中没有关闭？

Question

我正在使用 laravel livewire 删除两个表中的记录，问题是模态，正在删除记录但模态仍然显示。

奇怪的是，当我注释其中一行删除数据的代码时，它起作用了！

我正在使用 Bootstrap 4.1

这是我的职能：

    public function delete($id)
    {
        DB::beginTransaction();
        try 
        { 
            // If I comment on any of the following two lines (it doesn't matter what line it is), it works! 

            DetalleRamComputadora::where('fk_computadora', '=', $id)->delete();
            Computadora::where('id', '=', $id)->delete();

            DB::commit();
            $this->emit('confirm'); // Close modal "confirm"
            session()->flash('success', 'Registro eliminado con éxito');

        } catch (\Throwable $th) {
            DB::rollBack();
            $this->emit('confirm'); // Close modal "confirm"
            session()->flash('error', 'Ocurrió un error y no se almacenó el registro');
        }
    }

这是从 livewire 关闭模态的脚本：

window.livewire.on('confirm', () => {
     $('#delete_confirm').modal('hide');
});

请帮帮我！！

Answer 1

首先，我们无法验证 #delete_confirm 是否真的是您的模态框名称。其次，检查事件confirm是否被触发。

window.livewire.on('confirm', () => 
{
    alert('Yes, I have reached here');
});

如果正在触发事件，请尝试以下操作：

window.livewire.on('confirm', () => 
{
    $('.modal').modal('hide');
});

如果还是不行，强制完全销毁模态：

window.livewire.on('confirm', () => 
{
    $('.modal').modal('hide').data('bs.modal', null);
    $('.modal').remove();
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open');
    $('body').removeAttr('style');
});

Answer 2

我能够解决问题。只有我在模态

的 div 中添加了这段代码

**wire:ignore.self**

<div wire:ignore.self class="modal fade" id="delete_confirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    ...
</div>

Answer 3

在你的删除函数中，添加一个调度浏览器事件

public function delete($id)
{
        DB::beginTransaction();
        try 
        { 
            /*...Your code ... */
            $this->dispatchBrowserEvent('closeModal'); 

        } catch (\Throwable $th) {
            /*...Your code ... */
        }
}

然后在您的 app.blade.php 中，尝试像这样添加此 window 事件侦听器。

window.addEventListener('closeModal', event => {
     $("#delete_confirm").modal('hide');                
})

这样，您就可以通过从前端触发 javascript 来关闭模式。

P.S。有一个关于 laravel livewire 教程的 youtube 视频系列，它实际上使用 Boostrap Modal 来实现 CRUD 功能。你可以在这里观看！ https://www.youtube.com/watch?v=_DQi8TyA9hI

Answer 4

我也厌倦了解决这个问题，但我想到了直接关闭该模式而不需要任何 js 和 livewire 代码，只在 bootstrap 本身。这是我所做的：

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" wire:click.prevent="store()" data-bs-dismiss="modal">Add Students</button>

Answer 5

在模态弹出窗口中添加 wire:ignore.self

<div wire:ignore.self class="" id="">
</div>

为什么模态在 laravel livewire 中没有关闭？

Why the modal doesn't close in laravel livewire?

laravel

eloquent

bootstrap-modal

bootstrap-4

laravel-livewire