Dispatch Livewire events in console

When making a Bootstrap 5 toast component in Livewire 3, I am trying to bake in the ability to call a toast event via the browser's console.

However, when I call Livewire.dispatch('toast', { message: 'New toast' });, I receive the following error:

Unable to resolve dependency [Parameter #0 [ <required> $message ]] in class App\Livewire\Toast

For reference, this is the method it's calling:

   use Livewire\Attributes\On;

    #[On('toast')]
    public function toast($message): void
    {
        $this->body = $message;
        $this->js(<<<JAVASCRIPT
            let toastEl = document.getElementById('bs5Toast');
            let toast = bootstrap.Toast.getOrCreateInstance(toastEl);

            toast.show();
JAVASCRIPT
        );
    }

I can't figure out where I'm going wrong with the manual call in the console. In the render method, it works as expected when I call it.

jred_lewis

2 years ago

Level 36

I'm closer to how it should be, being able to call Livewire.dispatch('toast', { message: 'Message' }) and it displaying properly. But I now have duplication between the Blade and the Class.

Blade:

Livewire.on('toast', ({message}) => {
            $wire.body = message;

            let toastEl = document.getElementById('wireToast');
            new bootstrap.Toast(toastEl, { delay: 3000 })
                .show();
        });

Class:

public function toast($message): void
    {
        $this->body = $message;

        $this->js(<<<'JS'
            let toastEl = document.getElementById('wireToast');
            new bootstrap.Toast(toastEl, { delay: 3000 })
                .show();
JS
        );
    }

Any ideas how to get rid of the duplication while still being able to show existing messages as well as ones dispatched from the Livewire event?

Please or to participate in this conversation.