用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处于多值模式时（更多信息，请参见：Get Selected value from Multi-Value Select Boxes by 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' } 
     ] 
    } 
}) 

Answer 2

在Vue公司2，让所有选择2值的onchange：

更改此：

.on('change', function() { 
    self.$emit('input', this.value); // Don't use this.value 
}); 

要这样：

.on('change', function() { 
    self.$emit('input', $(this).val()); 
});