为什么模态不会在 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

我能够解决问题。只有我在modal的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 2

我也厌倦了解决这个问题，但我有一个想法，即直接关闭该模式，无需任何 js 和 livewire 代码，仅在引导程序本身中。这是我所做的：

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

首先，我们无法验证#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 4

在你的delete函数中，添加一个dispatch browser事件

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

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

在你的 app.blade.php 中，尝试像这样添加这个窗口事件监听器。

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

这样，您将能够通过从前端触发 javascript 来关闭模式。

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

Answer 5

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

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