In laravel 10/ livewire 3/ tailwindcss 3 app I to make multiselect based on https://github.com/alexpechkarev/alpinejs-multiselect code and I made it working properly, but how to make livewire side to know current selected options ? I define on livewire side :
class ReactionsChartStatistics extends Component
{
use AppCommonTrait;
// selected users in filter
#[Session]
public array $filterUsers = [];
// list of users to show in multiselect
public array $usersSelectionItems;
public function mount()
{
$this->usersSelectionItems = User::get()->pluck('name','id')->toArray();
...
}
public function render()
{
...
return view('livewire.admin.reactions-chart-statistics')->layout('components.layouts.admin');
}
and in resources/views/livewire/admin/reactions-chart-statistics.blade.php template :
$filterUsers::{{ print_r($filterUsers, true) }}<br>;
<div class="w-full" x-data="alpineMultiSelect({selected:['', '1'], elementId:'usersMultiSelection'})">
<select class="hidden " tabindex="10" id="usersMultiSelection" wire:model="filterUsers">
@foreach($usersSelectionItems as $key=>$label)
<option value="{{$key}}" data-search="{{$label}}">{{$key}}=>{{$label}}</option>
@endforeach
</select>
method alpineMultiSelect is defined in resources/js/app.js file.
But when I select users in multiselect component array $filterUsers is not updated as I need. Looks like multiselect component is not shown as it is... How can I do it ?
UPDATED BLOCK :
looking at example with at
sth : $wire.entangle
I made next :
In component I have $filterUsers declared:
class ReactionsChartStatistics extends Component
{
// selected users in filter
#[Session]
public array $filterUsers = [];
and in blade file this var used :
<div class="w-full"
x-data="alpineMultiSelect({selected:['', '1'], elementId:'usersMultiSelection', selectedValues : $wire.entangle('filterUsers')})">
<select class="hidden " tabindex="10" id="usersMultiSelection">
@foreach($usersSelectionItems as $key=>$label)
<option value="{{$key}}" data-search="{{$label}}">{{$key}}=>{{$label}}</option>
@endforeach
</select>
...
where selectedValues var is also used in app.js :
...
// get selected values
selectedValues() {
return this.options.filter(op => op.selected === true).map(el => el.value)
}
...
It does not work anyway. Also looking at the code seems select box is hidden by default with
style="display:none;"
attribute. Can it be key of the problem ?