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

问题描述

我正在使用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');
}); 

请帮助我！

解决方法

首先，我们无法验证#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');
}); 

,

我也厌倦了解决这个问题，但我有一个想法，直接关闭该模式，无需任何 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>
    

,

我能够解决问题。只有我将此代码添加到模态的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>

,

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

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来关闭模式。

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