Modal not oppening in Laravel Livewire

Question

I tried this modal in my code, the structure seems to be correct but for some reason it cannot open when I click the respective button (I created 2 buttons for test in the same modal). It's the first time it happens while I work with modals.

historico-pedidos.blade.php:

{{-- Componente responsável por exibir o histórico de pedidos do usuário --}}

{{-- Close your eyes. Count to one. That is how long forever feels. --}}

<a href="#" class="h-100 align-middle" wire:click.prevent="historico">
    <img class="menu-icon" src="{{ asset('img/calendario.svg') }}" alt="Histórico de Pedidos">
</a>

<button type="button" wire:click="historico"> TESTE </button>

<x-modal id="modalHistorico" title="Histórico de Pedidos" buttons-justify-center="true">
    <x-slot:body>
        <div class="row">
            Teste
        </div>
    </x-slot:body>

    <x-slot:footer>
        <button type="button" class="btn btn-success" wire:click="">
            <i class="fa fa-check"></i>
            Confirmar Alterações
        </button>
    </x-slot:footer>
</x-modal>

@section('scripts')

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

    window.livewire.on('showModalHistorico', () => {
        $('#modalHistorico').modal('show');
    });

</script>

@endsection

HistoricoPedidos:

emit('showModalHistorico'); //$this->showHistorico = true; } } I've placed the livewire link in my template: @livewire('historico-pedidos') I compared with other modals I've made and checked the docs in Livewire and Bootstrap, but everything looks fine.

Modal not oppening in Laravel Livewire

0 Answers0