Question

我有一个名为login的下拉列表。加载页面时会显示该列表，但是我无法从列表中选择一个选项。这是为什么？我已经搜索了互联网，但没有找到解决方法。

这是组件中的代码：

<template>
<div>
    <label for="login" class="control-label">Logins anlegen f&uuml;r</label>
    <select2 class="select2_tag form-control" name="login" 
                     multiple="multiple" :options="login">
    </select2>
</div>
</template>

<script>
import JQuery from 'jquery'
let $ = JQuery
import Select2 from '@/components/Select2.vue'

export default {
    name: 'Login',

    data: function () {
        return {
            login: [],
            loginUebertrag: ''
        }
    },

    components: {
        Select2
    },

    methods: {
        lade_login: function () {
            let vm = this;
            $.getJSON("/api/get_login.php", function (result) {
                vm.login = result;
                console.log("zeile 41: ", vm.login);
            });
        },
    },

    mounted()
    {
        this.lade_login();
    }
}
</script>

这是导入的组件（称为select2）中的代码：

<template>
<select class="form-control" >
    <slot></slot>
</select>
</template>
<script>
import JQuery from 'jquery'

let $ = JQuery

export default {
    name: 'select2',
    props: ['options', 'value'],

    mounted: function () {
        var vm = this
        $(this.$el)
        // init select2
            .select2({
                data: this.options,
                tags:true

            })
            //.val(this.value)
            //.trigger('change')
            // emit event on change.
            .on('change', function () {
                vm.$emit('input', this.value)
            });
        console.log( $(this.$el))
    },
    watch: {
        value: function (value) {
            // update value
            //console.log(value)
            $(this.$el)
                .val(value)
                .trigger('change')
        },
        options: function (options) {
            // update options
            $(this.$el).empty().select2({data: options,tags: true})
        }
    },
    destroyed: function () {
        $(this.$el).off().select2('destroy')
    }
}
</script>

感谢您的帮助！

无法从选项列表中选择选项

0 个答案: