Использование Select2 (множественный выбор) с помощью vue.js

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, чтобы получить все значения Select2 OnChange:

Изменить это:

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

Для этого:

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