为什么未触发 livewire 发出的事件？答案

【问题标题】：Why emitted events of livewire is not triggered?为什么未触发 livewire 发出的事件？
【发布时间】：2020-11-15 15:55:11
【问题描述】：

在 laravel 7 学习 livewire/livewire 1.3 我遇到了发出事件并不总是被触发

我用命令创建了组件

php artisan make:livewire hostel/hostelsHomepageSpotlight

并简化代码我没有看到事件警报。在 app/Http/Livewire/Hostel/HostelsHomepageSpotlight.php 中：

<?php

namespace App\Http\Livewire\Hostel;

use Auth;
use DB;
use App\Config;

use App\Hostel;
use App\HostelImage;
use App\library\CheckValueType;
use App\Settings;
use Livewire\Component;

class HostelsHomepageSpotlight extends Component
{

    public function render()
    {

        $hostels     = [];
        $current_page= 1;
        $hostel_rows_count = Hostel
            ::getByStatus('A')
            ->count();

        $this->emit('hostelsHomepageSpotlightOpened', [ 'mode'=> 'hostels_homepage_spotlight', 'current_page'=>$current_page, 'hostel_rows_count'=>$hostel_rows_count ] ); // EMIT EVENT

        return view('livewire.hostel.hostels-homepage-spotlight', [
            'hostelsDataRows' => $hostels,
            'hostel_rows_count'=> $hostel_rows_count,
            'current_page'=> $current_page,
        ]);
    }
}

在资源/视图/livewire/hostel/hostels-homepage-spotlight.blade.php：

<div>
    
    <h1>hostelsHomepageSpotlightOpened</h1>

</div>   

<script>
    // If to uncomment line below I see  alert
    // alert( 'resources/views/livewire/hostel/hostels-homepage-spotlight.blade.php::' )
    window.livewire.on('hostelsHomepageSpotlightOpened', data => {
        // I DO NOT SEE ALERT BELOW ANYWAY
        alert( 'hostelsHomepageSpotlightOpened::' )
        console.log('facility_opened data::')
        console.log(data)
        // alertsInit(data.mode)
        // lazyImagesInit("img.lazy_image")
    })
</script>

为什么没有触发事件？有没有办法调试它？

更新 #2： 我知道关于包装 div 的规则（没有任何类或样式定义）。我是否也要删除 JS 代码？

我试图移动 resources/js/app.js 中的所有 JS 代码：

window.$ = window.jQuery = require('jquery');

require('./bootstrap');

var Turbolinks = require("turbolinks")
Turbolinks.start()

// If to uncomment the line below I see it
// alert( '::resources/js/app.js' )
window.livewire.on('hostelsHomepageSpotlightOpened', data => {
// I do not see this alert
    alert( 'hostelsHomepageSpotlightOpened::' )
    console.log('facility_opened data::')
    console.log(data)
    // alertsInit(data.mode)
    // lazyImagesInit("img.lazy_image")
})

在我的资源/视图/布局/app.blade.php 中：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" xmlns:livewire="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Laravel:Livewire</title>
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    
    
    <link href="/css/app.css" rel="stylesheet">
    
    <script src="{{ asset('js/lazyload.js') }}"></script>   
    
    <!-- Styles -->
    @livewireStyles
    @livewireScripts
    
    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('/js/app/app_funcs.js') }}"></script>

</head>
<body class="text-center">

<div class="flexbox-parent page_container " id="page_content">
    <header class="flexbox-item header">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
               ...
            </nav>

    </header>
    
    <main class="flexbox-item fill-area content flexbox-item-grow">
        @yield('content')
    </main>
    
    <footer class="flexbox-item footer  ml-3 mr-3">
        ...
        <p class="m-2">copyright_text</p>
    </footer>

</div>

</body>
</html>

而且我的代码是 nit 触发的！我想这是我的应用程序在@livewireStyles 之后作为 app.js 的有效结构和@livewireScripts

更新 #3：

我试过了，还是不行。我有登录表单：

<article class="page_content_container">

   ...    
    <form class="form-login" wire:submit.prevent="submit">
        <input
            wire:model.lazy="form.email"
            name="email"
            id="email"
            class="form-control editable_field"
            placeholder="Your email address"
            autocomplete=off
        >
    </form>
   ...    
    
</article> <!-- page_content_container -->
{{--@push('scripts')--}}
    <script>
        $("#email").focus();
    </script>
{{--@endpush--}}

当@push/@endpush 在上面的行中被注释时，它可以正常工作，并且焦点设置为电子邮件输入。但是如果取消注释这两条线，则焦点未设置。

我修改了我的资源/视图/布局/app.blade.php：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Laravel:Livewire</title>
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    
    
    <link href="/css/app.css" rel="stylesheet">
    
    
    <!-- Styles -->
    @livewireStyles
    

    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('js/lazyload.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    
    @livewireScripts
    @stack('scripts')
    
    
    <script src="{{ asset('/js/app/app_funcs.js') }}"></script>

app.js - 首先是 bootstrap 和 jquery 包含在其中...

谢谢！

【问题讨论】：

标签： javascript laravel laravel-livewire

【解决方案1】：

Livewire 需要由 div 元素包裹的组件。

示例：

你的内容...

我的意思是我不确定您是否可以在 Livewire 刀片中包含 javascript。尝试将其移出到您的 app.js 文件中，看看它是否有效，因为其余部分看起来不错。

我记得遇到麻烦只是因为刀片的第一行是 html 注释，而不是 ?

因此，始终，您的 livewire 刀片的第一行必须是，最后一行是

希望有帮助！

【解决方案2】：

如果你想在 livewire 刀片下编写脚本，试试这种方式。在你的主布局中放在@livewireScripts 下

@stack('scripts')

现在您可以从 livewire 刀片文件中将脚本推送到此堆栈中，如下所示：

@push('scripts')
<script>
// some js code 

</script>
@endpush

【讨论】：

请看 UPDATED #3

【解决方案3】：

更新：在你的情况下它不起作用是有道理的。您不应该在 RENDER 函数中发出事件，如果您想在即将渲染的同一视图中侦听它。简而言之，对于您的情况，发射发生在视图加载之前，因此，当您的视图准备好时，收听它会“有点”晚，你失去了它！ :-)

解决方案：将 JS（window.livewire.on...）放在外面一步，这样当您在渲染中发出事件时它就已经准备好了。

简单来说，把JS代码放在父文件的scripts部分，你包含的文件如下

@livewire('hostel.hostels-homepage-spotlight')

附：当您处理 livewire 时，要监听事件或触发事件，不要忘记将其包装在准备好的文档中，即，

$( document ).ready(function() {
    livewire.emit('event_foo', 'foooo');
});

因此，您的 Spotlight PARENT 页面应如下所示：

<script>
    $( document ).ready(function() {
        window.livewire.on('hostelsHomepageSpotlightOpened', data => {
            alert( 'hostelsHomepageSpotlightOpened::' )
            console.log('facility_opened data::')
            console.log(data)
        });
    });
</script>

干杯，

【讨论】：