为什么livewire的触发事件没有被触发？

15 浏览
0 Comments

为什么livewire的触发事件没有被触发？

在学习Laravel 7中，我遇到了emit事件不一定触发的问题。我使用以下命令创建了一个组件：

php artisan make:livewire hostel/hostelsHomepageSpotlight

简化代码后，我没有看到事件的警报。

在app/Http/Livewire/Hostel/HostelsHomepageSpotlight.php中：

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,
        ]);
    }
}

在resources/views/livewire/hostel/hostels-homepage-spotlight.blade.php中：

    
hostelsHomepageSpotlightOpened

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

更新 #2:

我知道关于包装div（没有任何类或样式定义）的规则。

我还需要删除JS代码吗？

我尝试将所有JS代码移至resources/js/app.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")
})

在我的resources/views/layouts/app.blade.php中：




    
    
    Laravel:Livewire
    
    
    
    
    
       
    
    @livewireStyles
    @livewireScripts
    
    


    

            
    

    

        @yield('content')
    

    

        ...
        
copyright_text

我的代码仍然没有触发！

我认为我的应用程序的结构是有效的，因为app.js位于@livewireStyles和@livewireScripts之后。

更新 #3:

我尝试了一下，但没有成功。我有一个登录表单：


   ...    
    
   ...    

 
{{--@push('scripts')--}}
    
{{--@endpush--}}

当@push/@endpush被注释掉时，它正常工作并且焦点设置在电子邮件输入框上。

但是，如果取消注释这两行，焦点就不会被设置。

我修改了我的resources/views/layouts/app.blade.php：


    
    
    Laravel:Livewire
    
    
    
    
    
    
    @livewireStyles
    
    
    
    @livewireScripts
    @stack('scripts')

app.js - 在bootstrap和jquery之前...

谢谢！

0