Laravel Livewire Event Listeners not firing

Question

I am currently using an event emitter to render some Javascript to show a Stripe credit card input. The desired outcome is to show a modal and then render the credit card input using a Javascript event listener.

I have a button like so to show a Jetstream modal:

<x-jet-secondary-button type="button" wire:click="showCreateModal">Show</x-jet-secondary-button>

Within the Livewire component this is method:

public function showCreateModal()
{
    $this->emit('loadCard');

    $this->showCreate = true;
}

And then this is the Javascript event listener:

<script type="text/javascript">
    var STRIPE = Stripe('{{ config("cashier.key") }}');
    var elements = STRIPE.elements();

    Livewire.on('loadCard', function () {
        setTimeout(function() {
            var card = elements.create('card');
            card.mount('#card-element');
        }, 500)
    });
</script>

I have tried 3 or 4 different versions and so far no luck. Any help/feedback would be appreciated.

it seems x-jet-secondary-button this is laravel component not livewire ? — Kamlesh Paul
Is that HTML within the components view? Does the method get called (add a dd("Yes"); inside it to verify)? Do you enter the JavaScript code (add a console.log("Yes"); inside the callback to verify)? Do you get any errors in the console? — Qirel
@KamleshPaul Yes, that's a Jetstream component, but it doesn't matter. :) — Qirel

Doug Niccum Doug Niccum · Accepted Answer · 2020-09-29T14:50:08

Found the issue. I was loading Vue into the page on top of the @livewireScripts blade directive. By removing Vue, resolved the issue.

Laravel Livewire Event Listeners not firing

1 Answers