Refreshing / Re-Render a Livewire Component

If you are working with Laravel Livewire, there might be instance when you want to refresh the data on the front end.
Here is how you can do it

You can add a listener to your component that refreshes itself.

To add a listener to make the component refresh itself, simply add the following line to your ProductIndex component.

protected $listeners = ['refreshComponent' => '$refresh'];

With this, livewire will call the render method whenever refreshComponent event is fired.

You can emit the events using any of the available method.

Refresh Component from Template

<button wire:click="$emit('refreshComponent')">

Re Render from Component itself

$this->emit('refreshComponent');

Refresh / Re-Render from Global Javascript

<script>
    Livewire.emit('postAdded')
</script>

If you are looking to refresh the component directly via wire click you can do it

wire:click="$refresh"

If you are looking for Reusable Livewire Components checkout LivewireDemos.