Laravel Livewire Select2 Multiple sellect issue - php

Question

Product variation Color first time is disable after enable can select color.
without wire:ignore after select color its disappear from select option.
If I use wire:ignore
{{ $colors_active== 0 ?'disabled':'' }}
disable is not removed, it's still disabled.
product.blade.php
<div class="row g-3 align-center">
<div class="col-lg-3">
<div class="form-group">
<input class="form-control" type="text" value="Colors" readonly>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<select class="form-control color-select2" multiple style="width: 100%" {{ $colors_active== 0 ?'disabled':'' }} >
#foreach (App\Models\Admin\Color::orderBy('name', 'asc')->get() as $key => $color)
<option value="{{$color->code}}">
{{$color->name}}
</option>
#endforeach
</select>
</div>
</div>
<div class="col-lg-1">
<div class="form-group">
<div class="form-control-wrap">
<label class="c-switch c-switch-pill c-switch-opposite-success">
<input wire:model="colors_active" class="c-switch-input" type="checkbox" value="1" ><span class="c-switch-slider"></span>
</label>
</div>
</div>
</div>
</div>
Product.php Component
{
public $colors_active;
public $choice_attributes = [];
public $colors = [];
public function mount(){
}
public function render()
{
return view('livewire.admin.product.product')->layout('admin.layouts.master');
}
}

Answer 1

Livewire will ignore any changes to anything marked with wire:ignore, so naturally it will not re-render anything when its ignored.
You can solve this by using Apline.js, and entangle the $colors_active property to an attribute in Alpine.js. Entangle means that when Livewire updates the variable in its backend, Alpine updates its variable too - and vice-versa (Alpine.js updates Livewire when the variable is changed). Basically, its kept in sync between the two.
Then, you can make Alpine.js dynamically bind the disabled property of your select-element based on that variable.
<div x-data="{ 'colorsActive': #entangle('colors_active') }">
<select
class="form-control color-select2"
multiple
style="width: 100%"
wire:ignore
x-bind:disabled="colorsActive == 0"
>
#foreach (App\Models\Admin\Color::orderBy('name', 'asc')->get() as $key => $color)
<option value="{{ $color->code }}">
{{ $color->name }}
</option>
#endforeach
</select>
</div>

Answer 2

This is the way I use to approach this kind of solutions with Livewire, without Alpine because unfortunately I haven't learn it.
In the blade component:
<div class="col d-flex display-inline-block">
<label>Device</label>
<select {{ $customer ? '' : 'disabled' }} wire:model="selectedItem" class="form-control contact_devices_multiple" multiple="multiple" data-placeholder="Select" style="width: 100%;">
#foreach($devices as $device)
<option value="{{ $device->id }}">{{ $device->alias }}</option>
#endforeach
</select>
</div>
<script>
window.loadContactDeviceSelect2 = () => {
$('.contact_devices_multiple').select2().on('change',function () {
livewire.emitTo('contact-component','selectedItemChange',$(this).val());
});
}
loadContactDeviceSelect2();
window.livewire.on('loadContactDeviceSelect2',()=>{
loadContactDeviceSelect2();
});
</script>
in component
public $customer = null;
public $selectedItem = [];
public function hydrate()
{
$this->emit('loadContactDeviceSelect2');
}
public $listeners = [
'selectedItemChange',
];
public function selectedItemChange($value)
{
dd($value);
}