在 VueJs 中打开 Select2 下拉菜单时搜索框位置错误

Question

此图片链接显示“报告至”下拉列表中的搜索框位置错误的问题。这个应用程序是用 Vuejs 编写的。

这里我使用 Select2 插件作为下拉菜单。 我需要在 vuejs 中解决这个问题。

图片链接：https://i.stack.imgur.com/j37e0.png

我正在尝试通过以下链接https://github.com/select2/select2/issues/4614 实现这一点

但是这个methods_resizeDropdown，_positionDropdown会抛出控制台错误。

var select2Instance = $(selectNode).data('select2');
select2Instance.on('results:message', function(params){
this.dropdown._resizeDropdown();
this.dropdown._positionDropdown();
});

这里下面的代码是应用程序中的select2组件。

<template>
    <div class="single-select">
        <select class="select2" :disabled="disabled" multiple="multiple" v-if="multiple">
             <slot></slot>
         </select>
         <select class="select2" :disabled="disabled" v-else>
            <slot></slot>
         </select>
     </div>
</template>
<script>
    export default {
    name: 'ob-select2',
    props: {
        disabled: Boolean,
        options: Object,
        value: [String, Array],
        multiple: Boolean,
        inModal: Boolean,
        initialData:[Array]
    },

    computed: {
        config() {
            let o = this.options
            Object.assign(o, {theme: "onblick"})

            return o
        },

        el() {
            return jquery(this.$el).find("select")
        }
    },
    mounted() {
        this.init()

    },

    watch: {
        config(value) {
            this.init()
        },
        initialData(){
            if(this.initialData != undefined){
                this.appendInitialData()
            }
        },
        value(value) {
            if(this.multiple) { // For multiple
                value = value && value.length >= 0 ? value : []
                var el = this.el.val() && this.el.val().length >= 0 ? this.el.val() : []
                if ([...value].sort().join(",") != [...el].sort().join(",")) {
                    this.el.val(value).trigger('change')
                }
            } else { // For single
                value = value ? value : ''
                var el = this.el.val() ? this.el.val() : ''

                if(value != el)
                    this.el.val(value).trigger('change')
            }
        }
    },

    methods: {
        init() {
            var vm = this
            if(this.initialData != undefined){
                this.appendInitialData()
            }
            vm.el
              // init select2
              .select2(vm.config)
              .val(vm.value)
              .trigger('change')
              // emit event on change.
              .on('change', function () {
                  vm.$emit('input', vm.el.val())
                  jquery('.select2-selection__rendered').removeAttr('title');
              })
              .on('select2:open',function(){
                  vm.$emit('select2-open')
              })
              .on('select2:close',function(){
                  vm.$emit('select2-close')
              })
            if (vm.inModal) {
                vm.el.on('select2:open', function (e) {
                    jquery(".select2-container").addClass("in-overlay");
                })
                vm.el.on("select2:close", function (e) {
                    jquery(".select2-container").removeClass("in-overlay");
                });
            }
        },

        getSelect2Data() {
            return this.el.select2('data')
        },
        appendInitialData(){               
            if(this.initialData.length != 0){
                this.initialData.forEach((a)=>{
                    let newOption = new Option(a.text,a.id,true,true)
                    this.el.append(newOption).trigger('change')
                })
            }

        }
    }
}
</script>

如何使用 vuejs 解决此问题。我正在使用单选下拉菜单，下拉选项将来自 ajax 调用。

Answer 1

这是我的谷歌搜索的第一个主题问题，所以我会在这里回答。第一次单击下拉菜单以及在没有结果的搜索后第一次单击下拉菜单时，会出现下拉菜单的错误位置。未找到方法的特定错误是因为您将数据属性命名为 select2。将其命名为其他名称。

Here is a workaround 这似乎适用于很多人（包括我）。我的实现如下：

    // data-select2 conflicts with library code. data-something-select2 works
    // set the dropdownParent to fix positioning error
    // https://github.com/select2/select2-bootstrap-theme/issues/41#issuecomment-310825598
    $("select[data-use-select2]").each(function() {
        $(this).select2({
            theme: "bootstrap4",
            dropdownParent: $(this).parent()
        });
    });