Question

Laravel Livewire Select2 多重选择问题

2021-08-07

1722

php laravel laravel-livewire

产品变体颜色第一次被禁用，启用后可以选择颜色。没有 wire：ignore ，选择颜色后它会从选择选项中消失。

如果我使用 wire：ignore

{{ $colors_active== 0 ?'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 组件

{

    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 将忽略任何标有 wire:ignore 的内容的更改，因此当它被忽略时，它自然不会重新渲染任何内容。

您可以使用 Apline.js 解决此问题，并将 $colors_active 属性与 Alpine.js 中的属性纠缠在一起。纠缠意味着当 Livewire 在其后端更新变量时，Alpine 也会更新其变量 - 反之亦然（当变量发生变化时，Alpine.js 会更新 Livewire）。基本上，两者之间保持同步。

然后，您可以让 Alpine.js 根据该变量动态绑定 select 元素的 disabled 属性。

<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

这是我使用 Livewire 解决此类问题的方法，没有使用 Alpine，因为不幸的是我还没有学过它。在 blade 组件中：

<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>

在组件中

public $customer = null;
public $selectedItem = [];
public function hydrate()
{
    $this->emit('loadContactDeviceSelect2');
}
public $listeners = [
   'selectedItemChange',
];

public function selectedItemChange($value)
{
   dd($value);
}