Level 22
@jgaleano I am not sure but I think it is because you are paginating in render and when current user chnage paginate render again. How about doing paginate in mount method and give the data to public $allusers property?
Oct 20, 2022
9
Level 1
How to prevent Livewire pagination on wire:click?
I have a list of users that are paginated and shown on a page. Each user has a button that when click a short form is displayed. All of this works great on the first page but when I click on another page and click on the button the first pages gets rendered.
How to prevent the pagination when I click one of these buttons? Livewire component:
public $currentUser = null;
public function render()
{
$allusers = Client::where('active', '1')->orderBy('name')->paginate(12);
return view('livewire.user-management', [ 'allusers' => $allusers ]);
}
public function showUserForm($currentUser)
{
$this->$currentUser = $currentUser;
}
Livewire user-management blade file:
@foreach($allusers as $user)
<div>
{{$user->name}}
<button wire:click.prevent="showUserForm({{$user->id}})"> Form</button>
@if($currentUser == $user->id)
<form>....</form>
@endif
</div>
@endforeach
Level 1
@AungHtetPaing__ I added the mount method but for some reason when I click on the user form button the $allusers variable in the blade template becomes null
protected $allusers = null;
public function mount()
{
$this-> allusers = Client::where('active', '1')->orderBy('name')->paginate(12);
}
public function render()
{
return view('livewire.user-management', [ 'allusers' => $this->allusers ]);
}
Level 22
@jgaleano you don’t need to send $allusers again in render method if $allusers is public and access normally in blade.
Level 1
@AungHtetPaing__ If set to public, I get this error since it's type object(Illuminate\Pagination\LengthAwarePaginator):
Livewire component's [user-management] public property [allusers] must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them.
Level 22
@jgaleano Seem like I am giving wrong answer. I didn't know that paginate in mount doesn't work because normally I give initial one time data from mount by setting them in public property. Sorry about that.
Level 51
Are you including the pagination trait?
use WithPagination;
https://laravel-livewire.com/docs/2.x/pagination#paginating-data
Level 1
@webrobert Yes, I removed a lot of the other stuff my code has but use WithPagination is in the component.
Level 2
Why not keep the form outside the loop and only display it when a click event for the action is being triggered? Then you can have a property that temporarily holds the user's id, once the form has been filled you do what you need to do with it. I also, don't think there is need to have a prevent method in click event. You can have something like this Form
Level 1
@smartnathan The main reason is because in the UI it is better to have those fields close to the user so it can be easily identified to whom it belongs to.
Please or to participate in this conversation.