Laravel Livewire分页链接不起作用

时间:2020-09-25 12:53:34

标签: php laravel laravel-livewire

我创建带有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}}))”之类的事件可以正常工作

堆栈:

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

1 个答案:

答案 0 :(得分:5)

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

<div> All your content </div>