如何在Alpine.js动态表单中正确初始化Select2组件？

问题根源 #

1. DOM更新时机不匹配：点击Add按钮后立即调用初始化方法时，Alpine.js还未完成新<select>元素的DOM渲染，导致新组件无法被初始化。
2. 重复初始化破坏实例：每次调用$(".select2").select2()会重新初始化所有已存在的Select2组件，覆盖原有实例，导致倒数第二个组件功能异常。

解决方案 #

• 使用Alpine.js的$nextTick方法，等待DOM更新完成后再执行Select2初始化。
• 仅针对未被初始化的<select>元素执行初始化（通过筛选没有.select2-hidden-accessible类的元素，该类是Select2初始化后自动添加的）。

修改后的完整代码 #

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="//unpkg.com/alpinejs" defer></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <link
            href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    </head>
    <body>
        <div
            x-data="{
                count: 1,
                selects: ['One', 'Two', 'Three'],
                toggle() {
                    this.count++;
                    this.$nextTick(() => {
                        // 只初始化未被Select2处理过的select元素
                        $('.select2:not(.select2-hidden-accessible)').select2();
                    });
                }
            }"
        >
            <button @click="toggle()">Add</button>

            <template x-for="i in count" :key="i">
                <select class="select2 form-control">
                    <template x-for="(select, index) in selects" :key="index">
                        <option x-text="select"></option>
                    </template>
                </select>
            </template>
        </div>
        <script>
            $(document).ready(function () {
                // 初始化第一个select元素
                $('.select2').select2();
            });
        </script>
    </body>
</html>

关键改动说明 #

1. $nextTick的使用：确保Alpine.js完成新<select>元素的DOM插入后，再执行Select2初始化，保证新元素能被正确选中。
2. 筛选未初始化元素：通过.select2:not(.select2-hidden-accessible)选择器，只对还未被Select2处理的元素初始化，避免重复操作破坏已有组件实例。
3. 移除了冗余的空id和name属性（可选，不影响功能，但更规范）。

内容的提问来源于stack exchange，提问作者DCC024