Laravel Livewire组件在刷新后没有自动刷新/重新加载

Question

所以，我目前在一个项目中使用Laravel Livewire。但是当我尝试通过魔法方法$refresh从一个组件向另一个组件发出事件时，它会刷新（在xhr请求中获取dom）整个组件，但前端不会实时更新。

ProductReviewForm.php组件：

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

ProductReviewSection.php 组件：

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

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

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

所以我想要在从First组件调用save()函数时发出reviewSectionRefresh事件，其他组件应该监听它。这个工作正常。同时，在xhr中我可以得到更新后的dom，但前端组件没有更新。希望有任何使用Livewire的人能够帮助解决这个问题。

- fahim152

---

我不确定，但你可以尝试使用'$refresh'（不带引号）。 - KPK

你尝试把对象作为第二个参数传递给view()了吗？ return view('template-name', ['review_lists' => $review_lists]); - Chemaclass

@KPK，不行，那会出现错误，未定义的$refresh，因为它会期望$refresh变量。你可以看看https://calebporzio.com/video-realtime-livewire-w-laravel-echo-pusher这个链接（第二个视频在2.54分钟处）。Livewire是最近才出现的全新东西，所以我到目前为止还没有找到任何帮助。 - fahim152

@Chemaclass 兄弟，它不是那樣工作的 :( 在這裡查看 Livewire: https://youtu.be/fX1aOWWt2nQ - fahim152

@WahyuKristianto 兄弟，这是我的组件上的代码： <button wire:click="save" >提交</button> - fahim152

Answer 1

看起来我以错误的方式编写了组件 Blade 视图。

所有在刷新后的组件上的元素都应该像这样被包装在一个 div 元素中：

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

</div>  

以前我的刀片文件长这样。这是错误的

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

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

但那应该是这样的。

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

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

无论你写什么，都应该放在一个父级 DIV 元素中

- fahim152

---

是的，Livewire组件必须有一个单一的根元素。 - Wahyu Kristianto

哦，糟糕。我忘记检查我的组件没有被包装在相同的元素中。我头疼了两个小时。 - James

希望对你有所帮助，兄弟。当我第一次学习Livewire时，也花了我数小时。 :D - fahim152

大家好，我也是laravel livewire的新手。我在使用wire:model和wire:click时遇到了问题。即使我在mount方法中设置了值，模型值仍未初始化。单击和模型元素都在父div元素内，但仍无法正常工作。请问有经验的livewire用户能否提供一些指针？ - Sanjeet Chand

@SanjeetChand 如果您没有找到解决问题的正确答案，请在 Stack Overflow 上发布一个带有详细信息的问题。这样更容易理解您的疑问。 - fahim152