Utilisation de Select2 (sélections multiples) avec vue.js

Question

Je suis nouveau à voir et j'ai suivi leur 'directive personnalisée' au http://vuejs.org/examples/select2.html. Cela fonctionne bien lorsque vous ne sélectionnez qu'un seul élément, mais lorsque vous sélectionnez plusieurs éléments, il ne réussit que le premier. J'en ai besoin pour passer toutes les valeurs sélectionnées.

J'ai une configuration jsfiddle affichant le code qui est disponible ici. https://jsfiddle.net/f3kd6f14/1/

La directive est comme ci-dessous;

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') 
    } 

Toute aide serait appréciée.

Answer 1

this.value ne fonctionne pas comme prévu lorsque Select2 est en mode valeur multiple (plus d'informations ici: Get Selected value from Multi-Value Select Boxes by jquery-select2?).

Essayez ceci (violon travailler ici: 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

Dans Vue 2, pour obtenir toutes les valeurs de Select2 ONCHANGE:

Modifier ceci:

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

à ceci:

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