0

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 ?

1 Answer 1

1

You can use x-data="{ Sth : $wire.entangle('Your Livewire Variable')}"

Read more at Sharing state using $wire.entangle

Sign up to request clarification or add additional context in comments.

1 Comment

Please read UPDATED BLOCK

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.