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, Sep 29 '20 at 03:44
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, Sep 29 '20 at 05:55
@KamleshPaul Yes, that's a Jetstream component, but it doesn't matter. :) — Qirel, Sep 29 '20 at 05:55

score 1 · Accepted Answer · answered Sep 29 '20 at 14:50

1

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

answered Sep 29 '20 at 14:50

Doug Niccum

196
4
16

Laravel Livewire Event Listeners not firing

1 Answers1

Linked