Laravel Livewire 事件侦听器未触发

Question

我目前正在使用事件发射器渲染一些 Javascript 以显示 Stripe 信用卡输入。期望的结果是显示模态，然后使用 Javascript 事件侦听器呈现信用卡输入。

我有一个类似这样的按钮来显示 Jetstream 模式：

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

在 Livewire 组件中，这是方法：

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

    $this->showCreate = true;
}

然后这是 Javascript 事件侦听器：

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

我已经尝试了 3 或 4 个不同的版本，但到目前为止都没有成功。任何 help/feedback 将不胜感激。

Answer 1

发现问题。我在 @livewireScripts blade 指令之上将 Vue 加载到页面中。通过删除 Vue，问题得到解决。

Laravel Livewire 事件侦听器未触发

Laravel Livewire Event Listeners not firing

event-listener

event-handling

laravel

laravel-livewire