$this->selected is not populating it's array

[ivo-sopro]

Hi there, I have this strange issue, I need to fetch the current number of the selected rows.
When I check the demo here https://tables.laravel-boilerplate.com/tailwind?users1[filters][active]=1 when I select or deselect a checkbox this array is populated, screenshot:

However, when I debug enable this does not happen on my side:

And the array is populated only if I select different page in the pagination, for example if I click on 2 or 5 then the array in the debugger will be populated.
So, if I try to do this:
$this->setConfigurableAreas([ 'toolbar-right-end' => [ 'livewire.tables.button', [ 'selectedCount' => count($this->selectedCount), ], ], ]);
it won't work it will always stay 0 (zero) until I paginate on another page in the table. What I want to do is show a button if the count is more than 3 selected.
Any help and tip is appreciated, thank you very much!

[lrljoe]

This is expected behaviour, as otherwise each time you check a box, a full lifecycle event occurs, which can be problematic, especially with larger tables (for example when having 250 complex rows displayed).

You can access the list of "selectedItems" in AlpineJS as "selectedItems", which would allow you to show/hide a button, or access what's been selected in the frontend. selectedItems stays sync'd with the backend, but is aware of what has been selected (prior to the lifecycle occurring)

What's the purpose of your button? Bulk Actions may be your best bet if you want to interact with the select boxes.

For example, in your "livewire.tables.button" blade add:

<ul>
    <template x-for="selItem in selectedItems">
        <li x-text="selItem"></li>
    </template>
</ul>

And you'll be able to see the list of all selectedItems (including prior to pagination).

[ivo-sopro]

Hi @lrljoe thanks for the reply. Yes, definitely the bulk actions are built for that reactivity and they are great, however, in my case, via the setConfigurableAreas method have to show disabled button but if more than 3 items are selected the button becomes active.
I already use Aplinejs and just tried the "selectedItems" and it works out of the box, I couldn't find it in the documentation and this is exactly what I need, thank you very much for the precise answer and for the help, appreciated.

[lrljoe]

No problem at all, I do plan to document fully all of the AlpineJS elements that we use behind the scenes, just haven't had the time!

[ivo-sopro]

I can't wait to discover all Alpine features; it will surely be a boost, and understandable about lacking time, same here :)