javascript - 为什么未触发 livewire 发出的事件？

问题描述

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

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

更新#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 - 首先是引导程序和 jquery 包含在其中...

谢谢！

标签： javascriptlaravellaravel-livewire

javascript - 为什么未触发 livewire 发出的事件？

问题描述

解决方案

推荐阅读