Laravel Livewire Pagination links not working

Question

I create livewire component WithPagination Links render correct, but even wire:click="gotoPage(2)" not working properly

/** 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)
        ]);
    }
}

and view

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

Video:

https://monosnap.com/file/MO59IoLOCoc93tAbU7ET5IlVAVIHWN

In other components events like wire:submit.prevent="createProject" or wire:click="editProject({{ $project->id }})" working correct

Stack:

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

Answer 1

I had the same problem and i solved it just by wrapping all the content of the view in a single div, like this.

<div> All your content </div>

Answer 2

Livewire Documentation says:

"Let's say you have a show-posts component, but you want to limit the results to 10 posts per page. You can paginate the results by using the WithPagination trait provided by Livewire."

Component Controller: 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),
    ]);
   }
}

Component View: resources\views\livewire\path-to-your-component\component-view:

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

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

*Livewire components MUST have a SINGLE ROOT element

Your Laravel Blade result:

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

Hope this will help other people

Ref: Livewire Pagination