I'm working with Livewire 3 and facing an issue when paginating a user list. I’ve applied the WithPagination trait and set the pagination theme to Bootstrap, but the pagination links don’t update the data unless I manually refresh the page. If I remove @extends('layouts.app') it works fine, in the browser console -
Uncaught Could not find Livewire component in DOM tree
I tried to remove the Bootstrap theme and it didn't help out -
class UsersList extends Component
{
use WithPagination;
// protected $paginationTheme = 'bootstrap';
public $list;
public function render()
{
$list = User::paginate(10);
return view('livewire.usersList', ['list' => $list ]);
}
}
Thank you!
I'm working with Livewire 3 and facing an issue when paginating a user list. I’ve applied the WithPagination trait and set the pagination theme to Bootstrap, but the pagination links don’t update the data unless I manually refresh the page. If I remove @extends('layouts.app') it works fine, in the browser console -
Uncaught Could not find Livewire component in DOM tree
I tried to remove the Bootstrap theme and it didn't help out -
class UsersList extends Component
{
use WithPagination;
// protected $paginationTheme = 'bootstrap';
public $list;
public function render()
{
$list = User::paginate(10);
return view('livewire.usersList', ['list' => $list ]);
}
}
Thank you!
Share Improve this question edited Feb 6 at 13:14 skdishansachin 7044 silver badges21 bronze badges asked Feb 5 at 16:06 Rezki HaniRezki Hani 11 Answer
Reset to default 0i guess this is happened because when the Livewire component is not properly included in the DOM after a re-render, especially when using pagination with an array
Try this approach
<?php
use Livewire\WithPagination;
class UsersList extends Component{
use WithPagination;
public $list ;
use WithPagination;
public function render()
{
$data = Model::paginate(10); // Correct way to paginate
return view('livewire.usersList', ['list' => $list ]);
}
} ?>
Add key() to the Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div wire:key="unique-key-{{ $loop->index }}">
@foreach ($data as $item)
<p>{{ $item->name }}</p>
@endforeach
{{ $data->links() }} <!-- Ensure you're using Laravel's pagination links -->
</div>
</body>
</html>