Множественный выбор с использованием select2 в Livewire 3

Я хочу создать несколько вариантов выбора с помощью плагина select2 в компоненте livewire, но в первый раз, когда я выбираю «onchange», мой select2 исчезает в обычной опции выбора. Я использовал провод: игнорировать, чтобы предотвратить повторную визуализацию выбранного элемента, но он все равно не работает.

Вот мой компонент лезвия.

    <div wire:ignore>
      <select class = "select2" name = "named[]" wire:model = "named" multiple = "multiple">
               @foreach ($jobs as $job)
                    <option value = "{{ $job->id }}">{{ $job->name }}</option>
               @endforeach
      </select>
    </div>



<script>
loadContactDeviceSelect2 = () => {
        $('.select2').select2().on('change',function () {
            var value = $(this).val();
            console.info(value);
            @this.dispatchTo('ticket', 'selectedItemChange',value);
        });
        }
        loadContactDeviceSelect2();
        @this.on('loadContactDeviceSelect2',()=>{
        console.info('Event loadContactDeviceSelect2 triggered');
        loadContactDeviceSelect2();
        });
</script>

##а вот мой компонент Livewire##

class Ticket extends Component
{
public $named = [];
public $listeners = [
        'selectedItemChange',
    ];

public function save()
    {
if (is_string($this->named)) {
                $this->named = explode(',', $this->named);
            }

            foreach ($this->named as $userId) {
                DB::table('job_user')->insert([
                    'user_id' => $userId,
                    'job_id' => 2, // Assuming job_id is fixed as 2 in your case
                    'created_at' => Carbon::now(),
                ]);
            }
}

public function hydrate()
    {
        $this->dispatch('loadContactDeviceSelect2');
    }
public function selectedItemChange($value)
    {
$this->named = explode(',', $value);
}

public function render()
    {
$jobs = User::all();

        return view('livewire.ticket', ['jobs' => $jobs]);
}

}

🤔 А знаете ли вы, что...
PHP поддерживает работу с куки для управления данными между запросами.


59
1

Ответ:

Решено

Это возможное решение:

вид

<div>

    <div wire:ignore>

        <select class = "select2"
                wire:model = "named"
                multiple = "multiple"
        >

            @foreach ($jobs as $job)
                <option value = "{{ $job->id }}">{{ $job->name }}</option>
            @endforeach

        </select>

    </div>

    <script>

        document.addEventListener("livewire:initialized", () => {

            $(".select2").select2()

                         .on("change", function () {

                                const values = $(this).val();
                                console.info(values);

                                @this.named = values;
                               // @this.set("named", value); -- use this syntax to emulate wire:model.live
                         });
        });

    </script>

<div>

Класс


class Ticket extends Component
{
    public $named;


    public function save()
    {
        // ---- This is not needed: $named is already an array
        // if (is_string($this->named)) {
        //     $this->named = explode(',', $this->named);
        // }


        foreach ($this->named as $userId) {
            .....
    }


    public function render()
    {
        $jobs = User::all();

        return view('livewire.ticket', ['jobs' => $jobs]);
    }
}

Wire:model="named" достаточно для инициализации выбора, вам не нужно отправлять какое-либо событие, таким же образом, чтобы получить значение переменной $named, когда значение select2 изменяется, обработчик событий изменения, установленный в select2, равен достаточный