Issue dispatching an event from one Livewire component to another

Hi,

I am building a basic application to do some CRUD operations. I have two models, Article and Image, that are related through a one-to-many relationship.

I created two Livewire components: Index and Edit. Index just fetches the articles from the database and paginates them in a table. Edit carries out all the CRUD operations for an article and images.

In the Edit render view there is a button that users click to remove the article and all images. This operation is done in the Edit component and after that the user is redirected to the Index component.

My issues is that I want to show a message in the Index Render view to let the user know that the article was deleted.

Firstly, I tried with a Flash message. However, as I am using a pagination, this view is rendered a couple of times (I suspect this is due to the paginate count() method) and the flash session message is flushed.

Secondly, I tried dispatching an event from the Edit component to the Index component right before performing the redirection. This way I could enable a $showArticleIndicator to true in the Index component and show the alert in the HTML. Nonetheless this is not working either.

// Edit component
public function delete()
 {
        foreach($this->article->images as $image) {
            $this->_deleteImage($image);
        }
        $this->article->delete();

        $this->dispatch('article-deleted')->to(Index::class);

        $this->redirectRoute('article.index', navigate: true);

 }

// Index component
#[On('article-deleted')] 
public function deletedArticle()
 {
        $this->showArticleDeletedIndicator = true;
}

Am I approaching this issue correctly? Why is the event not being dispatched?

Thanks!

ramonrietdijk

2 years ago

Best Answer

Level 30

All mutations that happen in Livewire will be bundled in one response back to the client. This means that the event dispatched in the delete method will be received at the same time as the redirect. Because the index component does not exist on the edit view, it will not do anything - as you have noticed yourself.

Regarding flash messages, it seems that the message may be flushed before it got a chance to be rendered as you've mentioned above. An alternative approach would be to set the value in the session yourself, and removing it after retrieving it. This is easily done using the session()->pull() method, which is what I personally use in my Livewire components.

Example:

// In your Edit component
session()->put('message', 'The article has been deleted!');

<!-- In your Index component -->
@if(session()->has('message'))
    <p>{{ session()->pull('message') }}</p>
@endif

This way, you will be able to store information for longer, and only remove it when it has been used.

1 like

cscazorla

2 years ago

Level 2

That's a great idea and works flawleslly!

Instead of adding the blade snippet to the Index component blade view I have added it to my layout. Hence, it can be used by all components.

Thanks, @ramonrietdijk !

1 like

ramonrietdijk

2 years ago

Level 30

@cscazorla Glad to hear! Could you consider marking my previous answer as the solution? This will categorize your question as "Solved".

cscazorla

2 years ago

Level 2

Done.

Thanks for the quick response!

1 like

Please or to participate in this conversation.