Laravel Livewire 事件侦听器未触发答案

【问题标题】：Laravel Livewire Event Listeners not firingLaravel Livewire 事件侦听器未触发
【发布时间】：2021-01-14 15:28:47
【问题描述】：

我目前正在使用事件发射器来呈现一些 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 个不同的版本，但到目前为止都没有运气。任何帮助/反馈将不胜感激。

【问题讨论】：

看来 x-jet-secondary-button 这是 laravel 组件不是 livewire 吗？
是组件视图中的 HTML 吗？该方法是否被调用（在其中添加dd("Yes"); 以进行验证）？您是否输入了 JavaScript 代码（在回调中添加 console.log("Yes"); 以进行验证）？您是否在控制台中收到任何错误？
@KamleshPaul 是的，这是一个 Jetstream 组件，但没关系。 :)

标签： laravel event-handling event-listener laravel-livewire

【解决方案1】：

发现问题。我正在将 Vue 加载到 @livewireScripts 刀片指令之上的页面中。通过删除 Vue，解决了这个问题。

【讨论】：