Laravel Livewire 与 Select2：动态输入添加和语言更改时丢失状态

Question

我正在开发一个 Laravel 项目，使用 Livewire 和 Select2 来实现动态表单。我遇到了一个挑战，当我动态添加新的选择输入或更改语言（这会改变选择输入中的选项）时，Select2 会失去其增强功能。我的目标是在这些动态更新中保留 Select2 状态。

问题描述：

当我动态添加新的选择输入（addInput 方法）时，或者当我更改语言（应根据语言过滤 Select2 中的选项）时，现有的 Select2 输入将失去其增强状态并恢复为标准 HTML 选择元素。 尽管使用了wire:ignore.self来阻止Livewire更新Select2组件本身，但还是会出现此问题。

代码示例：

Livewire 组件：(CreateRecipe.php)

// Livewire component methods like addInput, updatedLanguage, etc.
// Relevant properties: $inputs, $language

刀片模板：(create-recipe.blade.php)

{{-- Language Selection --}}
<div>
    <x-input.select wire:model.live="language" id="language_id">
        <option value="">Select Language</option>
        @foreach ($languages as $lang)
            <option value="{{$lang}}">{{$lang}}</option>
        @endforeach
    </x-input.select>
</div>

{{-- Dynamic Inputs for Ingredients --}}
@foreach($inputs as $key => $input)
    <div wire:ignore.self class="w-1/4">
        <select data-type="ingredient" wire:key="ingredients-for-language-{{$language}}" wire:model.live="inputs.{{ $key }}.ingredient"
                id="input_{{ $key }}_ingredient" class="form-select block w-full">
            <option value="">Select Ingredient</option>
            @foreach ($ingredients as $ingredient)
                <option value="{{$ingredient->id}}">{{$ingredient->name}} - ({{$ingredient->language}})</option>
            @endforeach
        </select>
    </div>
@endforeach

Select2 的 JavaScript：

function initSelect2() {
    $('select[id^="input_"][id$="_ingredient"]').each(function () {
        if ($(this).hasClass('select2-hidden-accessible')) {
            $(this).select2('destroy');
        }
        $(this).select2({
            placeholder: 'Select Ingredient',
            allowClear: true,
        });
    });
}
// Initialization and Livewire hooks
$(document).ready(initSelect2);
Livewire.hook('commit', initSelect2);
Livewire.on('ingredientCreated', initSelect2);

尝试解决：

• 我尝试在 Livewire 的提交钩子上重新初始化 Select2 动态添加新输入或更改语言。
• 我使用了wire:ignore.self来阻止Livewire完全 重新渲染 Select2 组件，但问题仍然存在。
• 我还尝试了不同的 Livewire hooks 和 JavaScript 时机策略

问题：

1. 如何维持 Select2 状态和功能 动态添加新输入或更改 Livewire 中的语言 组件？
2. 是否有更有效的方法将 Livewire 与 Select2 集成 动态形式？

环境：

Laravel 版本：10.0

Livewire 版本：3.2

选择2版本：4.1.0

Answer 1

我来回答你的部分问题： Livewire 中不允许动态输入，根据经验，我 h