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时不起作用。

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

0 个答案: