Issue with Select2 Resetting in Laravel Livewire on Input Change - Stack Overflow

admin管理员组

文章数量:1332873

I am using Laravel Livewire in my project and have integrated the Select2 library to enhance the dropdown functionality with a search feature. However, I am encountering an issue where any interaction, such as a change in Select2 or other input fields on the same Livewire component, causes Select2 to revert to a normal HTML select element, losing its enhanced features (like the search box).

I understand that using wire:ignore could help to prevent Livewire from re-rendering the Select2 element, but I cannot use this approach because I need the dropdown to remain reactive and stay synchronized with Livewire.

If anyone has experienced a similar issue or knows a solution to make Select2 work seamlessly with Livewire while maintaining its reactivity and preventing it from resetting, please share your insights.

Livewire Class:

<?php

namespace App\Livewire;

use App\Models\Curriculum;
use Livewire\Attributes\Modelable;
use Livewire\Component;

class TestComponent extends Component
{
    #[Modelable]
    public $select;

    public $curricula = [];

    public $data = [
        'curricula_ids' => [],
        'title' => ''
    ];

    public $curricula_ids, $title;

    public function mount()
    {
        $this->curricula = Curriculum::select('id', 'title')->pluck('title', 'id')->toArray();
    }

    public function submit(){
        $this->data['curricula_ids'] = $this->curricula_ids;
        $this->data['title'] = $this->title;
    }

    public function render()
    {
        return view('livewire.test-component');
    }
}

Livewire blade :

@push('styles')
<link href="/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
{{-- jQuery --}}
<script src=".6.0.min.js"></script>
<script src="/[email protected]/dist/js/select2.min.js" defer></script>
@endpush

<div>
    <form wire:submit.prevent='submit'>
        <div class="form-group">
            <label for="select">Select Curricula</label>
        </div>
        <div class="form-group">
            <label for="select" class="">School Title</label>
            <select id="select" class="" name="state" class="w-100" >
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
              </select>
        </div>
        @dump($curricula_ids)
        <div class="form-group">
            <label for="select" class="">School Title</label>
            <input type="text" wire:model.live='title'>
        </div>
        <div class="form-group">
            <label for="select">select status</label>
            <select class="form-control" tabindex="3" id='status' wire:model.live='status'>
                <option value="1">Active</option>
                <option value="0">Inactive</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#select').select2();
            $('#select').on('change', function (e) {
                @this.set('select', e.target.value, true);
            });
        });
    </script>
@endpush

本文标签： Issue with Select2 Resetting in Laravel Livewire on Input ChangeStack Overflow