diff --git a/docs/partials/examples/SingleSelectObject.vue b/docs/partials/examples/SingleSelectObject.vue index 59969f0b..9d1746a4 100644 --- a/docs/partials/examples/SingleSelectObject.vue +++ b/docs/partials/examples/SingleSelectObject.vue @@ -9,7 +9,7 @@ div placeholder="Select one", :options="options", :searchable="false", - :allow-empty="false" + :allow-empty="true" ) pre.language-json code. @@ -26,7 +26,7 @@ export default { }, data () { return { - value: { name: 'Vue.js', language: 'JavaScript' }, + value: null, options: [ { name: 'Vue.js', language: 'JavaScript' }, { name: 'Rails', language: 'Ruby' }, diff --git a/src/multiselectMixin.js b/src/multiselectMixin.js index df616c97..76cf0638 100644 --- a/src/multiselectMixin.js +++ b/src/multiselectMixin.js @@ -331,7 +331,7 @@ export default { this.$emit('search-change', this.search, this.id) }, 'value' (value) { - this.internalValue = this.getInternalValue() + this.internalValue = this.getInternalValue(value) } }, methods: { @@ -350,12 +350,12 @@ export default { * Converts the external value to the internal value * @returns {Array} returns the internal value */ - getInternalValue () { - return this.multiple - ? deepClone(this.value) - : this.value === null || this.value === undefined - ? [] - : deepClone([this.value]) + getInternalValue (value) { + return value === null || value === undefined + ? [] + : this.multiple + ? deepClone(value) + : deepClone([value]) }, /** * Filters and then flattens the options list diff --git a/test/unit/specs/Multiselect.spec.js b/test/unit/specs/Multiselect.spec.js index 9f6079a6..8a2693e4 100644 --- a/test/unit/specs/Multiselect.spec.js +++ b/test/unit/specs/Multiselect.spec.js @@ -27,6 +27,34 @@ describe('Multiselect.vue', () => { expect(vm.value).to.deep.equal([]) }) }) + describe(':value', () => { + it('should work when initial value is null', () => { + const vm = new Vue({ + template: `
+
+ `, + components: { Multiselect }, + data: { + value: null, + source: [{ val: 1, label: '1' }, { val: 2, label: '2' }] + }, + methods: { + resetValue () { + this.value = null + } + } + }).$mount() + + const comp = vm.$children[0] + + expect(comp.internalValue).to.deep.equal([]) + }) + }) describe('Events emitting', () => { describe('@input', () => { it('should be called whenever the value changes passing the new value and id', () => { @@ -2834,7 +2862,7 @@ describe('Multiselect.vue', () => { source: ['1', '2', '3', '4', '5'] } }).$mount() - expect(vm.$children[0].getInternalValue()).to.deep.equal(['1', '2', '3']) + expect(vm.$children[0].getInternalValue(vm.value)).to.deep.equal(['1', '2', '3']) }) }) describe('when multiple == FALSE', () => { @@ -2856,7 +2884,7 @@ describe('Multiselect.vue', () => { source: ['1', '2', '3', '4', '5'] } }).$mount() - expect(vm.$children[0].getInternalValue()).to.deep.equal(['1']) + expect(vm.$children[0].getInternalValue(vm.value)).to.deep.equal(['1']) }) }) describe('and the selection is empty', () => {