Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

motinska94's avatar

How do I refresh a VOLT component from another VOLT component?

I capitalized Volt, because I've been looking for a solution to this problem for months now, and every single result offers a livewire solution, which does not work with Volt components. As shown below.

I have two volt components on the same page, one for listing products, one for creating a new one. When I create a new product, I want listing component to refresh and show the newly added one. Any idea how I can do that?

store_listings.php

<?php

use App\Models\Store;
use Livewire\Volt\Component;

new class extends Component {
    public Store $store;

    public function deleteListing($id)
    {
        $this->store->listings()->find($id)->delete();
    }
};

create_listing.php

<?php

use App\Models\Store;
use Livewire\Volt\Component;

new class extends Component {
    public Store $store;
    public $title;
    public $price;
    public $valid_until;

    public function mount()
    {
        $this->valid_until = now()->addDay()->format('Y-m-d');
    }

    public function createListing()
    {
        $this->store->listings()->create([
            'title' => $this->pull('title'),
            'price' => $this->pull('price') * 100,
            'valid_until' => $this->pull('valid_until'),
            'sold' => false
        ]);
    }
};

I found this answer while googling. I did everything they said, but after I create a new listing it shows a black and empty modal on the page like I ran dump().

Here's how I tried it :

store_listings.php

use Livewire\Attributes\On;
...
    #[On('refresh-the-component')]
    public function refresh()
    {
        $this->refresh();
    }
...

create_listing.php

    public function createListing()
    {
        $this->store->listings()->create([
            ...
        ]);

        $this->dispatch('refresh-the-component');
    }
0 likes
2 replies
motinska94's avatar
motinska94
OP
Best Answer
Level 3

As usual, I've struggled with this problem for months, and minutes after making a post about it I've come up with the solution.

In case anyone else faces this problem, Just follow the suggestion link on the post, and use it this way :

Instead of :

    #[On('refresh-the-component')]
    public function refresh()
    {
        $this->refresh();
    }

Use it like :

    #[On('refresh-the-component')]
    public function mount()
	{

	}
Snapey's avatar

You cannot do this;

    public function refresh()
    {
        $this->refresh();
    }

because you are creating a function called refresh and then calling itself.

1 like

Please or to participate in this conversation.