我创建livewire组件和分页链接渲染正确，但即使电线：单击="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-
堆栈：
我也遇到了同样的问题，我只是通过将视图的所有内容包装在一个div中来解决它，就像这样。
<div> All your content </div>
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 the Component\Component View:
<div>
@foreach ($posts as $post)
...
@endforeach
{{ $posts->links() }}
</div>
*Livewire组件必须具有单个根元素
您的Laravel刀片结果：
<html>
<head>
...
@livewireStyles
...
</head>
<body>
Your html body here
...
@livewire('your-component')
...
@livewireScripts
</body>
</html>
希望这能帮助其他人
Ref： Livewire分页
您必须有一个html容器。
