I got that error in consol.
product:1153 Uncaught TypeError: Cannot read property ‘find’ of undefined
at HTMLSelectElement. (product:1153)
Using Livewire with Select2 Selectpicker
Hi there,
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);