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

更简单！

在 livewire 组件中自动打开模式它不起作用

open modal automatically in livewire component it doesn't work

javascript

laravel

bootstrap-4.1.x

laravel-livewire