Small tweaks to null handling

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

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

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: `<div><multiselect
+            v-model="value"
+            :options="source"
+            track-by="val"
+            label="label"
+          >
+          </multiselect></div>
+        `,
+        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', () => {