0
1.1K
VisualizaçõesLaravel Livewire Select2 Problema de selección múltiple
Variación del producto El color se deshabilita por primera vez después de habilitar se puede seleccionar el color. sin wire:ignore después de seleccionar el color, desaparecerá de la opción de selección.
Si uso wire:ignore
{{ $colors_active== 0 ?'disabled':'' }}deshabilitar no se elimina, todavía está deshabilitado.
producto.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>Componente Producto.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'); } }2 Respostas
Responde à pergunta0
Livewire ignorará cualquier cambio en cualquier cosa marcada con wire:ignore , por lo que, naturalmente, no volverá a procesar nada cuando se ignore.
Puede resolver esto usando Apline.js y entrelazar la propiedad $colors_active con un atributo en Alpine.js. Enredar significa que cuando Livewire actualiza la variable en su backend, Alpine también actualiza su variable, y viceversa (Alpine.js actualiza Livewire cuando se cambia la variable). Básicamente, se mantiene sincronizado entre los dos.
Luego, puede hacer que Alpine.js vincule dinámicamente la propiedad deshabilitada de su elemento de selección en función de esa 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>0
Esta es la forma en que suelo abordar este tipo de soluciones con Livewire, sin Alpine porque desafortunadamente no lo he aprendido. En el componente de la pala:
<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>en componente
public $customer = null; public $selectedItem = []; public function hydrate() { $this->emit('loadContactDeviceSelect2'); } public $listeners = [ 'selectedItemChange', ]; public function selectedItemChange($value) { dd($value); }