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: `