Using Select2 (multiple selections) with vue.js

Question

I'm new to vue and have followed their 'custom directive' at http://vuejs.org/examples/select2.html.

This works well when only selecting one item, but when you're selecting multiple items it only passes the first one. I need it to pass all values selected.

I have a jsfiddle set up displaying the code which is available here. https://jsfiddle.net/f3kd6f14/1/

The directive is as below;

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

Any help would be appreciated.

Community · Accepted Answer · 2017-05-23 11:46:24Z

7

this.value doesn't work like you expect when Select2 is in multiple value mode (more info here: Get Selected value from Multi-Value Select Boxes by jquery-select2?).

Try this (working fiddle here: 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' }
        ]
    }
})

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Feb 2, 2016 at 13:34

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Landeza Over a year ago

Good answer.. now, how to specify the default selected options?

David K. Hess Over a year ago

Just assign your default to selected rather than an empty array.

aleixfabra · Accepted Answer · 2017-06-11 15:06:53Z

-1

In Vue 2, to get all select2 values onchange:

Change this:

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

To this:

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

answered Jun 11, 2017 at 15:06

aleixfabra

1,0953 gold badges11 silver badges24 bronze badges

1 Comment

user2976753 Over a year ago

This cause an internal infinite loop that ends freezing the app

Collectives™ on Stack Overflow

Using Select2 (multiple selections) with vue.js

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related