Laravel Livewire Select2 多个销售问题答案

【问题标题】：Laravel Livewire Select2 Multiple sellect issueLaravel Livewire Select2 多个销售问题
【发布时间】：2021-10-11 18:08:06
【问题描述】：

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

如果我使用wire:ignore

{{ $colors_active== 0 ?'disabled':'' }}

disable 没有被移除，它仍然被禁用。

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

【问题讨论】：

标签： php laravel laravel-livewire

【解决方案1】：

Livewire 将忽略对标有 wire:ignore 的任何内容的任何更改，因此自然不会在被忽略时重新渲染任何内容。

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

然后，您可以让 Alpine.js 基于该变量动态绑定您的选择元素的 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>

【讨论】：

【解决方案2】：

这是我使用 Livewire 处理这种解决方案的方式，没有使用 Alpine，因为不幸的是我还没有学会它。在刀片组件中：

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

【讨论】：