javascript - 在 livewire 组件中自动打开模态它不起作用

Question

我想在初始化组件时显示一个模态，但它不起作用。我$this->emit('show)用来打开模态

当我在我的视图中添加一个按钮时，emit('show')工作！但我不想要那个，我想要的是当视图加载时，模式会自动显示

这是我的组件：

public function mount($id)
{
    if ($id != null) {
        try {
            $data = DetalleRamComputadora::find($id);
            $this->fk_ram_tecnologia    = $data->fk_tecnologia;
            $this->fk_ram_capacidad     = $data->fk_capacidad;
            $this->fk_ram_frecuencia    = $data->frecuencia;

            $this->emit('show'); // Close modal "create"
        } catch (\Throwable $th) {
            // throw $th;
        }
    }
}

这是我认为的脚本；

<script type="text/javascript">

    window.livewire.on('show', () => {
         $('#exampleModal').modal('show');
    });
    
</script>

这是我的模态：

<div wire:ignore.self class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
                 <span aria-hidden="true close-btn">×</span>
            </button>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            ...
        </div>
    </div>
</div>

Answer 1

发射发生在 DOM 完成之前，因此您的脚本不会被执行。

建议：

wire:init="openModal"

在

<div wire:init="openModal" wire:ignore.self class="modal fade" id="exampleModal"...

在组件中：

 public function openModal()
 {
     $this->emit('show');
 }

或者

你可以试试：

<script>
    $(document).ready(function () {
        window.livewire.emit('show');
    });

    window.livewire.on('show', () => {
        $('#exampleModal').modal('show');
    });
</script>

更简单！