CODEWITHSUNDEEP
phplaravellaravel-livewire
Rashed Zaman
Rashed Zaman

Reputation: 11

Laravel Livewire Select2 Multiple sellect issue

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.

enter image description here

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');
    }
}

Upvotes: 1

Views: 1784

Answers (2)

Prospero
Prospero

Reputation: 2352

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);
}

Upvotes: 2

Qirel
Qirel

Reputation: 26450

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>

Upvotes: 2

Related Questions