我创建带有Pagination的livewire组件 链接呈现正确,但是甚至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}}))”之类的事件可以正常工作
堆栈:
答案 0 :(得分:5)
我遇到了同样的问题,我只是通过将视图的所有内容包装在一个 div 中解决了它,就像这样。
<div> All your content </div>