Laravel Livewire component not refreshing/reloading automatically after refreshing it

Question

So, I'm currently using Laravel Livewire in one of my projects. But when I try emit an event from one component to another component by magic mathod $refresh , its refreshing (got the dom in xhr request ) the total component but the Front end is not updating realtime.

ProductReviewForm.php Component:

public function save()
{
    //some functionalities .... 
    $this->emit('reviewSectionRefresh');
}

ProductReviewSection.php Component:

protected $listeners = [
    'reviewSectionRefresh' => '$refresh',
];

public function render()
{
    $this->review_lists = ProductReview::orderBy('id', 'DESC')->get();

    return view('livewire.desktop.product-review-section');
}

So I want to emit the reviewSectionRefresh event to be emitted whenever I call save() function from First component, That should be listened by $listeners from other component. This is working fine. also in xhr I'm getting the refreshed dom but the component in frontend is not updating. Hoping anyone working with Livewire may help with that.

Have you tried to pass the objects to the view() as the second param? `return view('template-name', ['review_lists' => $review_lists]); — Chemaclass
– Chemaclass, Commented Feb 25, 2020 at 13:38
@KPK , no that would give error, undefined $refresh , because that will expect $refresh variable. you can see calebporzio.com/video-realtime-livewire-w-laravel-echo-pusher this. ( Second video at 2.54 min ) Livewire is completely a new thing coming out some while ago, thats why I couldn't find any help so far. — fahim152
– fahim152, Commented Feb 25, 2020 at 13:53
Do you have trigger action in view? Something like <button wire:click="save"> — W Kristianto
– W Kristianto, Commented Feb 25, 2020 at 13:54
@Chemaclass it doesn't work like that way bro :( see about Livewire here: youtu.be/fX1aOWWt2nQ — fahim152
– fahim152, Commented Feb 25, 2020 at 13:55

fahim152 · Accepted Answer · 2020-02-26 04:49:53Z

56

So it seems I've write my component blade view in wrong way.

all things on refreshed component should be wrapped in one div element like this:

<div> 
{{-- Anything you want to do --}}

</div>

previously my blade file was like. Which is Wrong

<div class=""> 
 {{ -- some dom elements -- }}
</div>

<div class=""> 
{{ -- some other dom elements -- }}
</div>

but that should be like.

<div>
    <div class=""> 
       {{ -- some dom elements -- }}
    </div>

    <div class=""> 
    {{ -- some other dom elements -- }}
    </div>
</div>

So Whatever you write, that should be inside ONE PARENT DIV ELEMENT

edited Feb 26, 2020 at 4:49

answered Feb 26, 2020 at 4:44

fahim152

2,6191 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

W Kristianto Over a year ago

yes Livewire components MUST have a single root element

James Over a year ago

Oh Man. I forget to check that my component was not wrapped in same element. I was scratching my head for two hours

fahim152 Over a year ago

hope it helps you out bro. It also took my hours when I was learning livewire for the very first time. :D

Sanjeet Chand Over a year ago

Hi Guys, I am also new to laravel livewire. I am having issues with wire:model and wire:click. The model value is not initialised event though I set the value in the mount method. Both the click and the model elements are inside a parent div element and it still does not work. Can any of you experienced livewire users please suggest some pointers?

fahim152 Over a year ago

@SanjeetChand if you couldn't find proper answer of your issue please post a question in SO with details. It would be much better to understand your query then

Collectives™ on Stack Overflow

Laravel Livewire component not refreshing/reloading automatically after refreshing it

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related