Using Livewire with Select2 Selectpicker

I got that error in consol.
product:1153 Uncaught TypeError: Cannot read property ‘find’ of undefined
at HTMLSelectElement. (product:1153)

Hi there, :yum:

If u have any error with blade or your ide, or u want write code in a separate script. U can try this:

            <div class="col-span-6 sm:col-span-4">
                <x-jet-label for="account_id" value="{{ __('Account') }}"/>
                <x-jet-input id="account_id" type="hidden" wire:model.lazy="account_id"/>
                <div wire:ignore>
                    <select data-livewire="@this"
                            class="js-select rounded-md shadow-sm px-2 py-1 border mt-1 block w-full">
                        <option selected value="">--{{__('select account')}}--</option>
                        @foreach($accounts as $account)
                            <option value="{{$account->id}}">{{$account->name}}</option>
                        @endforeach
                    </select>
                </div>
                <x-jet-input-error for="account_id" class="mt-2"/>
            </div>
    /*
    |--------------------------------------------------------------------------
    | Jquery Plugins Routes
    |--------------------------------------------------------------------------
    | Here is where you can register Jquery Plugins for your application.
    */
    $('.js-select').select2().on('change', function (e) {
        let livewire = $(this).data('livewire')
        eval(livewire).set('account_id', $(this).val());
    });

eval => to re-execute livewire instance
ignore => prevent rendering error js plugin

Hi, @bbcreation I’m using your script but I’m getting this error, is there anything I’m doing wrong??

Property [$] not found on component: [backend.music-collab-select]

Your solution worked well, I made a small modification by changing from @this.set(elementName, data); to @this.set(‘property_name’, data);

thanks @bbcreation , it works in my case.