VueJS中如何为Select2组件设置预选中项？

解决方案 #

问题根因 #

你当前封装的组件存在两个疏漏导致预选中失效：

1. 仅在组件mounted阶段执行了一次选中值赋值，如果options是异步加载的（比如从后端接口获取），mounted执行时选项数据还未加载完成，赋值操作会直接失效
2. 没有监听value属性的变化，父组件修改v-model绑定值时无法同步到Select2组件；同时options更新后也没有重新同步选中值

具体修改步骤 #

1. 修改Select2组件的watch逻辑

给组件新增value监听，同时在options更新后重新设置选中值：

const select2Component = Vue.component("select2", {
    props: ["options", "value"],
    template: "#select2-template",
    mounted: function () {
        var vm = this;
        $(vm.$el)
            .select2({
                data: dataToSelect2Format(vm.options),
                placeholder: "Select Subdomains",
                multiple: vm.$attrs.multiple !== undefined // 兼容单选/多选
            })
            .val(vm.value)
            .trigger("change")
            .on("change", function () {
                vm.$emit("input", $(this).val());
            });

    },
    watch: {
        options: function (options) {
            $(this.$el)
                .empty()
                .select2({data: dataToSelect2Format(options)});
            // 选项更新后重新同步选中值
            $(this.$el).val(this.value).trigger("change");
        },
        value: function (newVal) {
            // 外部绑定值变化时同步选中状态
            $(this.$el).val(newVal).trigger("change");
        }
    },
    destroyed: function () {
        $(this.$el)
            .off()
            .select2("destroy");
    }
});

2. 父组件设置预选中值

直接给v-model绑定的变量赋初始值即可，不管是同步初始化还是异步赋值都可以生效：

// 父组件代码
data() {
    return {
        // 多选场景直接传预选中的id数组，单选传单个id值即可
        subdomains: [1, 3],
        option_subdomains: []
    }
},
async mounted() {
    // 异步加载选项也能正常触发预选中
    const res = await fetch('/api/get-subdomains');
    this.option_subdomains = await res.json();
}

额外优化建议 #

你当前调用组件时写的<option></option>插槽内容不会生效，因为Select2是通过data属性渲染选项的，可以直接删掉这段冗余代码。

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