使用带有vue.js的Select2(多个选择)

Question

我是vue的新手,并且已经在http://vuejs.org/examples/select2.html上关注了他们的"自定义指令" .

仅在选择一个项目时效果很好,但是当您选择多个项目时,它只会通过第一个项目.我需要它来传递所有选定的值.

我有一个jsfiddle设置显示这里可用的代码. https://jsfiddle.net/f3kd6f14/1/

该指令如下;

 Vue.directive('select', {
    twoWay: true,
    priority: 1000,

    params: ['options'],

    bind: function() {
        var self = this
        $(this.el)
                .select2({
                    data: this.params.options
                })
                .on('change', function() {
                    self.set(this.value)
                })
    },
    update: function(value) {
        $(this.el).val(value).trigger('change')
    },
    unbind: function() {
        $(this.el).off().select2('destroy')
    }

任何帮助,将不胜感激.

Answer 1

this.value当Select2处于多值模式时,此功能不像您期望的那样(此处有更多信息:通过jquery-select2从多值选择框中获取选定值？).

试试这个(在这里工作小提琴:https://jsfiddle.net/02rafh8p/):

Vue.directive('select', {
    twoWay: true,
    priority: 1000,

    params: ['options'],

    bind: function() {
        var self = this
        $(this.el)
                .select2({
                    data: this.params.options
                })
                .on('change', function() {
                    self.set($(self.el).val()) // Don't use this.value
                })
    },
    update: function(value) {
        $(this.el).val(value).trigger('change')
    },
    unbind: function() {
        $(this.el).off().select2('destroy')
    }
})

var vm = new Vue({
    el: '#el',
    data: {
        selected: [], // Result is an array of values.

        roles : [
            { id: 1, text: 'hello' },
            { id: 2, text: 'what' }
        ]
    }
})