用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()); 
});