javascript - 将现有列表中的标签动态添加到 Select2

Question

我有一个基本的 Select2 组件，如下所示；

<template>
            <select v-if="multi" multiple ref='select' style="width:100%">
                <slot></slot>
            </select>
            <select v-else ref='select' style="width:100%">
                <slot></slot>
            </select>
</template>
<script>
    export default{
        props: ['usedFor','options', 'value','multi','tags','selected'],
        mounted: function () {
        var vm = this;
        $(this.$refs.select)
            .select2({ data: this.options, width:'100%' })
            .on('change', function (ev, args) {
                if (!(args && "ignore" in args)) {
                    var selectedItems = [];
                   $.each($(this.selectedOptions).toArray(), function(index,value){
                       selectedItems.push({
                           id: value.value,
                          value: value.innerText
                       });
                   });
                    vm.$emit('input', $(this).val());
                    let usedForEvent = vm.usedFor+'-text';
                    bus.$emit(vm.usedFor,$(this).val());
                    bus.$emit(usedForEvent, selectedItems);
                }
            });
        Vue.nextTick(() => {
            $(this.$refs.select)
                .val(this.value)
                .trigger('change', { ignore: true })
        });
    },
        watch: {
        value: function () {
            // update value
            $(this.$refs.select)
                .val(this.value)
                .trigger('change', { ignore: true });
        },
        options: function (options) {
            // update options
            $(this.$refs.select).select2({
                data: options.data,
                tags: this.tags,
                placeholder: 'Please Select'
            })
        }
    },
        destroyed: function () {
        $(this.$refs.select).off().select2('destroy')
    }
    }
</script>

我正在这样使用它；

        <select2 id="#my_dd" :usedFor="preferencesSelect" :options="{data: loaded_options, tags:false}" :multi="true" :selected="{data:selected_options}">
            <option value="0">Select One</option>
        </select2>

我可以使用多项选择，它显示为标签。但是我正在尝试预先选择一些项目。当我使用我的控制台来定位 Select2 并使用$('#my_dd').val(2).trigger('change');它时。

但是我需要对我的组件执行此操作。数据通过 AJAX 请求加载并使用:options道具发送到组件。

我有点迷失了如何继续进行此操作，甚至尝试在我的 Vue 中使用 jQuery，但效果不佳。

if(this.selected){
  $(this.$refs.select).val(2).trigger('change')
}

上面的代码在 Chrome 控制台上运行良好，但在我运行 Vue 时却不行。

标签： javascriptvue.jsvuejs2vue-componentjquery-select2