Select2 example doesn't show how to handle multiselect

[unirgy]

Hello,

I'm trying to use example in this file: https://github.com/vuejs/vue/blob/dev/examples/select2/index.html

Works well, besides "multiple" option. Apparently vm.value gives only 1st entry.
I've tried to replace with $(vm.$el).val() on line 53, but the browser freezes, and have to kill the process.

Thank you.

[chrisvfritz]

What you describe happens because of how JavaScript compares arrays. Identical numbers or strings are immutable values with the same reference (1 === 1 is always true). Identical arrays however, which are compared in a multiple select, will have different references ([1] === [1] is always false). That led you to an infinite loop of a new value being emitted when the select value updates, then the watcher detecting that the value had changed and updating select2, which then triggers the change event again and emits an updated value, etc.

You can short-circuit this infinite loop by checking for deep equality in the watcher before telling select2 to update. For example, with lodash's isEqual:

var $el = $(this.$el)
if (!_.isEqual($el.val(), value)) {
  $(this.$el).select2('val', value)
}

[jobelenus]

So the built-in vuejs select2 doesn't include support multiple-select then? Because it seems to still not work out of the box.

[jobelenus]

I'm using your technique inside, and still getting the infinite loop:

		let $el = window.jQuery(this.$el);
		// init select2
		$el
			.select2(options)
			.val(this.value)
			.trigger('change')
		// emit event on change.
			.on('change', function () {
				if (!_.isEqual($el.val(), this.value)) {
					vm.$emit('input', $el.val());
				}
			});

I don't understand how this would work because this.value is always the first entry in the multiple select. While $el.val() is always all the entries. So they'll never be equal, and thus the infinite loop remains.

Edit: am I just doing this in the wrong place?

[fvonellerts]

You need to compare the arrays inside the Vue Watcher, not when emitting it.
This worked for me (sorry for the ugly formatting):

`
watch: {
value: function (value) {
// update value

            if (typeof value === 'object') {
                // multiselect, need a deep compare

                if (JSON.stringify(value) !== JSON.stringify(value)) {
                    $(this.$el)
                        .val(value)
                        .trigger('change')
                }
            } else {
                $(this.$el)
                    .val(value)
                    .trigger('change')
            }
        }
    }

`