【问题标题】:Laravel Livewire component not refreshing/reloading automatically after refreshing itLaravel Livewire 组件在刷新后不会自动刷新/重新加载
【发布时间】:2020-06-09 05:56:48
【问题描述】:

所以,我目前在我的一个项目中使用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');
} 

所以我想在第一个组件调用save() 函数时发出reviewSectionRefresh 事件,这应该由其他组件的$listeners 监听。这工作正常。同样在 xhr 中,我得到了刷新的 dom,但前端的组件没有更新。希望与 Livewire 合作的任何人都可以对此有所帮助。

【问题讨论】:

  • 我不确定,但你可以试试不带引号的'$refresh'
  • 您是否尝试将对象作为第二个参数传递给view()? `return view('template-name', ['review_lists' => $review_lists]);
  • @KPK ,不,这会给出错误,未定义 $refresh ,因为这将需要 $refresh 变量。你可以看到calebporzio.com/video-realtime-livewire-w-laravel-echo-pusher这个。 (第二个视频在 2.54 分钟) Livewire 是不久前出现的全新事物,这就是为什么我到目前为止找不到任何帮助。
  • 你有触发动作吗?类似<button wire:click="save">
  • @Chemaclass 它不像那样工作,兄弟 :( 请参阅此处的 Livewireyoutu.be/fX1aOWWt2nQ

标签: php laravel laravel-livewire


【解决方案1】:

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

刷新组件上的所有东西都应该像这样包装在一个 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>

所以无论你写什么,都应该在 ONE PARENT DIV ELEMENT 中

【讨论】:

  • 是 Livewire 组件必须有一个根元素
  • 哦,伙计。我忘记检查我的组件是否未包含在同一元素中。我挠了头两个小时
  • 希望对您有所帮助。当我第一次学习 livewire 时,我也花了好几个小时。 :D
  • 大家好,我也是 laravel livewire 的新手。我遇到了wire:model 和wire:click 的问题。尽管我在 mount 方法中设置了值,但模型值不是初始化事件。 click 和 model 元素都在父 div 元素内,但它仍然不起作用。各位有经验的livewire用户可以给点建议吗?
  • @SanjeetChand 如果您找不到问题的正确答案,请在 SO 中发布问题并提供详细信息。那么了解您的查询会更好
猜你喜欢
  • 2022-06-11
  • 1970-01-01
  • 2021-05-12
  • 1970-01-01
  • 2011-05-17
  • 1970-01-01
  • 1970-01-01
  • 2022-08-17
  • 2021-05-11
相关资源
最近更新 更多