在Vue组件中使用Select2时下拉选项显示空白如何解决？

问题根因 #

• 核心是Select2默认要求传入的选项数据必须包含id（选项值）和text（显示文本）字段，你现有subdomains数组里用的是character_code作为显示字段，和Select2默认字段不匹配，所以能识别到选项数量但显示空白。
• 其次你代码里同时使用slot插入默认option和data属性传选项列表，二者会发生冲突；且你v-model绑定的是完整choice对象，Select2默认只支持字符串/数字类型的值，直接传对象会出现值匹配错误。

修正方案 #

1. 调整Select2字段映射 #

在Select2初始化配置中指定自定义字段匹配规则，对齐你现有数据结构。

2. 统一选项渲染逻辑 #

优先用data属性传选项列表，移除冲突的slot写法，或者全用slot渲染不要传data属性。

3. 适配对象类型的值绑定 #

如果需要保留绑定完整choice对象的逻辑，新增序列化/反序列化处理适配Select2的字符串值规则。

完整修正代码 #

组件代码 #

<script type="text/x-template" id="select2-template">
  <select>
    <!-- 默认提示选项直接写在组件内，避免slot冲突 -->
    <option disabled value="0">Select one</option>
  </select>
</script>

<script>
Vue.component("select2", {
    props: ["subdomains", "value"],
    template: "#select2-template",
    mounted: function() {
        const vm = this;
        const select2Config = {
            data: this.subdomains,
            // 自定义值字段：序列化对象适配Select2字符串值要求
            id: item => JSON.stringify(item),
            // 自定义下拉选项显示内容
            templateResult: item => item.character_code || '',
            // 自定义选中后显示内容
            templateSelection: item => item.character_code || ''
        }
        $(this.$el)
            .select2(select2Config)
            .val(JSON.stringify(this.value))
            .trigger("change")
            .on("change", function() {
                // 反序列化返回对象，和原有v-model逻辑对齐
                vm.$emit("input", this.value ? JSON.parse(this.value) : null);
            });
    },
    watch: {
        value: function(value) {
            $(this.$el)
                .val(value ? JSON.stringify(value) : '0')
                .trigger("change");
        },
        subdomains: function(subdomains) {
            const select2Config = {
                data: subdomains,
                id: item => JSON.stringify(item),
                templateResult: item => item.character_code || '',
                templateSelection: item => item.character_code || ''
            }
            $(this.$el)
                .empty()
                // 重新添加默认选项
                .append('<option disabled value="0">Select one</option>')
                .select2(select2Config);
            // 选项更新后重新匹配当前值
            $(this.$el).val(this.value ? JSON.stringify(this.value) : '0').trigger("change")
        }
    },
    destroyed: function() {
        $(this.$el)
            .off()
            .select2("destroy");
    }
});
</script>

父组件调用代码 #

<div>
  <p>Selected: {{ subdomain }}</p>
  <!-- 注意传入你的实际选项数组变量，原变量名是subdomains就替换掉此处的choices -->
  <select2 :subdomains="subdomains" v-model="subdomain"></select2>
</div>

优化建议 #

如果你的subdomains数组每个元素都有唯一id字段，更推荐绑定id作为v-model的值，无需处理序列化逻辑，性能更高也更稳定，需要用到完整对象时根据id到subdomains数组中过滤即可。

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