Динамически добавлять теги из существующего списка в Select2 - PullRequest
Новая
       17

Динамически добавлять теги из существующего списка в Select2

1 голос
/ 04 мая 2019

У меня есть базовый компонент 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 реквизита.

Я немного растерялся, как поступить с этим, даже пытался сделать с JQuery прямо в моем Vue, но это не сработало. 

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

Приведенный выше код очень хорошо работает на консоли Chrome, но не при запуске Vue.

...