Laravel Livewire 分页链接不起作用

Question

我创建了 Livewire 组件 WithPagination 链接呈现正确，但即使是 wire:click="gotoPage(2)" 也无法正常工作

/** app/Http/Livewire/Project/Index.php **/

namespace App\Http\Livewire\Project;

use App\Models\Project;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use Livewire\WithPagination;

class Index extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.project.index', [
            'projects' => Project::where('owner_id', Auth::id())->paginate(10)
        ]);
    }
}

并查看

resources/views/livewire/project/index.blade.php

@forelse($projects as $project)
        @if($loop->first)
            <table class="min-w-full">
                <thead>
                <tr>
                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ID</th>
                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Title</th>
                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Description</th>
                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Owner</th>
                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
                </tr>
                </thead>
    
                <tbody class="bg-white">
        @endif
                    <tr>
                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
                            {{ $project->id }}
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
                            {{ $project->title }}
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
                            {{ $project->description }}
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name={{ $project->owner->name }}&color=7F9CF5&background=EBF4FF" alt="" />
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm leading-5 font-medium text-gray-900">{{ $project->owner->name }}</div>
                                    <div class="text-sm leading-5 text-gray-500">{{ $project->owner->email }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
                            <a href="{{$project->path()}}" class="text-indigo-600 hover:text-indigo-900">{{__('View')}}</a>
                        </td>
                    </tr>
        @if($loop->last)
                </tbody>
            </table>
            {{ $projects->links() }}
        @endif
    @empty
        <h3>No projects yet.</h3>
    @endforelse

视频：

https://monosnap.com/file/MO59IoLOCoc93tAbU7ET5IlVAVIHWN

在其他组件事件中，例如 wire:submit.prevent="createProject" 或 wire:click="editProject({{ $project->id }})" 工作正常

堆栈：

• PHP 7.4
• Laravel 8
• Livewire 2
• Chrome 85.0.4183.102

Answer 1

我遇到了同样的问题，我只是通过将视图的所有内容包装在一个 div 中来解决它，就像这样。

<div> All your content </div>

Answer 2

Livewire 文档说：

“假设您有一个 show-posts 组件，但您希望将结果限制为每页 10 个帖子。 您可以使用 Livewire 提供的 WithPagination 特征对结果进行分页。”

组件控制器：App\Http\Livewire\PathToYourComponent\Component：

use Livewire\WithPagination;

class ShowPosts extends Component
{
   use WithPagination;

   public function render()
   {
    return view('livewire.show-posts', [
        'posts' => Post::paginate(10),
    ]);
   }
}

组件视图： resources\views\livewire\path-to-your-component\component-view：

<div>
 @foreach ($posts as $post)
    ...
 @endforeach

 {{ $posts->links() }}
</div>

*Livewire 组件必须有一个 SINGLE ROOT 元素

您的 Laravel Blade 结果：

<html>
 <head>
  ...
  @livewireStyles
  ...
 </head>
 <body>
  Your html body here
   ...
   @livewire('your-component')
   ...
  @livewireScripts
 </body>
</html>

希望这对其他人有所帮助

参考：Livewire Pagination

Answer 3

您必须有一个 html 容器。