livewire dispatchBrowserEvent 未触发警报

Question

我有一个 livewire 组件，它有一个 update() 函数，可以在组件发生变化时更新它。调用 update() 函数并根据需要更新数据库中的项目。在此函数结束时，我运行一个 dispatchBrowserEvent() 来确认更新，但我的 js 文件中的相应函数未被调用，因此未触发警报。

我一直在使用文档中的这个方法https://laravel-livewire.com/docs/2.x/events#browser

livewire 组件：

<?php

namespace App\Http\Livewire;

use App\Models\Item;
use Livewire\Component;

class EditItem extends Component
{
    public int $item;
    public string $date = '';

    public function render()
    {
        return view('livewire.edit-item');
    }

    public function update()
    {

        $item             = Item::find( 1 );
        $item->date       = now();

        $item->save();

        $this->dispatchBrowserEvent('update-item', ['item' => $item->id, 'date' => $item->date]);

    }
}

其blade文件：

<div>
    <button wire:click="update">Update Me!</button>
</div>

在我的 app.js 我有以下内容：

jQuery(document).ready( function($) {
    /** LIVEWIRE EVENT ACTIONS **/
    window.addEventListener('update-item', event => {
        alert( 'Date updated to: ' + event.detail.date + 'on item with id of ' + event.detail.item );
    })

});

Answer 1

原来我没有运行 npm run dev 所以 javascript 不存在。在运行之后一切都很好。

Answer 2

删除 app.js

中的代码

jQuery(document).ready( function($) {
    /** LIVEWIRE EVENT ACTIONS **/
    window.addEventListener('update-item', event => {
        alert( 'Date updated to: ' + event.detail.date + 'on item with id of ' + event.detail.item );
    })

});

在blade

<div>
        <button wire:click="update">Update Me!</button>
 
    <script>
        document.addEventListener('update-item', event => {
           alert( 'Date updated to: ' + event.detail.date + 'on item with id of ' + event.detail.item );
        })
    </script>
</div>

livewire dispatchBrowserEvent 未触发警报

livewire dispatchBrowserEvent is not triggering alert

javascript

laravel-livewire