Livewire 内部组件中的属性不会刷新

Question

看看下面的例子：

showPost.blade.php：

<div>
    <livewire:content-box :content="$post"/>

    <button wire:click="nextPost" >Next Post >></button>
</div>

和 内容框.blade.php：

<div>
    <h1>{{ $content->title }}</h1>
    <p>{{ $content->content }}</p>
</div>

到目前为止，完全清楚接下来会发生什么……：首先，通过showPost接收要查看的内容的信息，并传递给contentBox，一切正常..

现在我想通过我放置的按钮并调用nextPost方法通过帐户获取下一个内容的信息：

class ShowPost extends Component
{
    public Post $post;

    public function render()
    {

        return view('livewire.show-post');
    }

    public function nextPost()   
    {
        $id = $this->post->id;
        $nextPost = Post::where('id', '>', $id)->first();
        $this->post = $nextPost;
    }

...

但是什么都没有发生，contentBox 组件也没有反应....有人遇到过这个问题吗？？？！

Answer 1

Livewire 不喜欢嵌套组件。在您的情况下，我们可以使用基本刀片组件：

<div>
    <x-content-box :content="$post"/>

    <button wire:click="nextPost" >Next Post >></button>
</div>

然后：

1. 将 content-box.blade.php 移动到资源/视图/组件/
2. 移除 app/Http/Livewire 中的 component_name.php 文件

大多数时候，我们可以将 2 个嵌套的 livewire 组件更改为 livewire(parent) + basic Blade 组件(child)，

Answer 2

我不确定 livewire 是否适用于嵌套组件。可以改用分页。 The livewire docs 建议您不要将它们用于小 sn-ps 或将刀片组件用于此类嵌套。

你可以通过一些简单的分页来实现你现在正在做的事情。

<?php

namespace App\Http\Livewire;

use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;

class SomeContent extends Component
{
    use WithPagination;

    public function render()
    {
        // Using simplePaginate(1) instead of paginate(1).
        // simplePaginate only shows "<- Previous" and "Next ->" links 
        // paginate shows those 2 buttons but also page numbers which you don't seem to want.
        return view('livewire.some-content', [
            'users' => User::simplePaginate(1),
        ]);
    }
}

<div>
    {{-- This might look wrong, but essentially it's looping through an array of length 1 because we're paginating --}}
    @foreach ($users as $user)
        <h1>{{ $user->name }}</h1>
        <h2>{{ $user->email }}</h2>
    @endforeach
    {!! $users->links() !!}
</div>

编辑

我可以确认刀片组件工作正常。

这里，nextUser 与您给出的实现相同。

    public function nextUser()   
    {
        $id = $this->user->id;
        $nextUser = User::where('id', '>', $id)->first();
        $this->user = $nextUser;
    }

<div class="container">
    <div class="content">
        {{-- These two have the exact same template --}}
        <livewire:child :user="$user" />{{-- Doesn't update when clicking Next --}}
        <x-blade-child  :user="$user" />{{-- Updates when clicking Next --}}
    </div>
    <div>
        <button wire:click="nextUser">Next</button>
    </div>
</div>

单击 nextUser 时，刀片组件会更新，但 livewire 组件不会。