Livewire & Select2 - laravel

Question

I am using Livewire and Slect2 in my project
and I am code to select 2 javascript also but select 2 value is not passed to the database here is my code
My Blade File
<div class="col-12 col-lg-12 col-sm-12">
<div wire:ignore>
<div class="form-group">
<label for="exampleInputRounded0">Section Name</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
</div>
<select class="form-control rounded-0 " wire:model="cr_classes_id" id="cr_classes_id" style="width: 100%;" tabindex="-1" aria-hidden="true">
#foreach ($classes as $class)
<option value="{{$class->id}}">{{$class->classes_name}}</option>
#endforeach
</select>
</div>
#error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>#enderror
</div>
</div>
</div>
Here is My JS
#push('js')
<script type="text/javascript">
$(document).ready(function () {
$('#cr_classes_id').select2();
$('#cr_classes_id').on('change', function (e) {
var data = $('#cr_classes_id').select2("val");
#this.set('cr_classes_id', data);
});
});
</script>
#endpush
Consol Error
Uncaught TypeError: Cannot read property '$wire' of undefined
at Livewire.value (index.js:31)
at HTMLSelectElement.<anonymous> (ClassRooms:844)
at HTMLSelectElement.dispatch (jquery.min.js:2)
at HTMLSelectElement.v.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at HTMLSelectElement.<anonymous> (jquery.min.js:2)
at Function.each (jquery.min.js:2)
at k.fn.init.each (jquery.min.js:2)
at k.fn.init.trigger (jquery.min.js:2)
at n.select (select2.min.js:2)
without wire:ignore Working find and data send to the database

Answer 1

Try this
<div class="col-12 col-lg-12 col-sm-12">
<div wire:ignore.self>
<div class="form-group">
<label for="exampleInputRounded0">Section Name</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
</div>
<select class="form-control rounded-0 " wire:change="$emit('classChanged', $event.target.value)" style="width: 100%;" tabindex="-1" aria-hidden="true">
#foreach ($classes as $class)
<option value="{{$class->id}}" {{ $cr_classes_id ? 'selected' : ''}} >{{$class->classes_name}}</option>
#endforeach
</select>
</div>
#error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>#enderror
</div>
</div>
</div>
and in component
public $cr_classes_id = '';
public $listeners = [
'classChanged'
];
......
public function classChanged($value)
{
$this->cr_classes_id = $value;
}

Answer 2

try to add ":key="cr_classes_id_key" in your blade file
<div class="col-12 col-lg-12 col-sm-12">
<div wire:ignore :key="cr_classes_id_key">
<div class="form-group">
<label for="exampleInputRounded0">Section Name</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
</div>
<select class="form-control rounded-0 " wire:model="cr_classes_id" id="cr_classes_id" style="width: 100%;" tabindex="-1" aria-hidden="true">
#foreach ($classes as $class)
<option value="{{$class->id}}">{{$class->classes_name}}</option>
#endforeach
</select>
</div>
#error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>#enderror
</div>
</div>