- update getOptionLabel to be consistent when using index

- move index warning from getOptionLabel to `select` method
- update isOptionSelected, pull up object comparator to it's own method
- add test edge cases

src/components/Select.vue

@@ -346,13 +346,13 @@
               aria-label="Search for option"
       >
 
-      <button 
+      <button
-        v-show="showClearButton" 
+        v-show="showClearButton"
-        :disabled="disabled" 
+        :disabled="disabled"
         @click="clearSelection"
-        type="button" 
+        type="button"
-        class="clear" 
+        class="clear"
-        title="Clear selection" 
+        title="Clear selection"
       >
         <span aria-hidden="true">&times;</span>
       </button>
@@ -512,6 +512,12 @@
       /**
        * Callback to generate the label text. If {option}
        * is an object, returns option[this.label] by default.
+       *
+       * Label text is used for filtering comparison and
+       * displaying. If you only need to adjust the
+       * display, you should use the `option` and
+       * `selected-option` slots.
+       *
        * @type {Function}
        * @param  {Object || String} option
        * @return {String}
@@ -519,6 +525,10 @@
       getOptionLabel: {
         type: Function,
         default(option) {
+          if( this.index ) {
+            option = this.findOptionByIndexValue(option)
+          }
+
           if (typeof option === 'object') {
             if (!option.hasOwnProperty(this.label)) {
               return console.warn(
@@ -527,28 +537,7 @@
                 'http://sagalbot.github.io/vue-select/#ex-labels'
               )
             }
-
+            return option[this.label]
-            if(this.index) {
-              if (!option.hasOwnProperty(this.index)) {
-                console.warn(
-                  `[vue-select warn]: Index key "option.${this.index}" does not` +
-                  ` exist in options object ${JSON.stringify(option)}.`
-                )
-              }
-            }
-
-            if (this.label && option[this.label]) {
-              return option[this.label]
-            }
-          }
-          if(this.index) {
-            let label = option
-            this.options.forEach((val) => {
-              if (val[this.index] == option) {
-                label = val[this.label]
-              }
-            })
-            return label
           }
           return option;
         }
@@ -793,7 +782,13 @@
             option = this.createOption(option)
           }
           if(this.index) {
-            option  = option[this.index]
+            if (!option.hasOwnProperty(this.index)) {
+              return console.warn(
+                  `[vue-select warn]: Index key "option.${this.index}" does not` +
+                  ` exist in options object ${JSON.stringify(option)}.`
+              )
+            }
+            option = option[this.index]
           }
           if (this.multiple && !this.mutableValue) {
             this.mutableValue = [option]
@@ -875,22 +870,50 @@
        * @return {Boolean}        True when selected | False otherwise
        */
       isOptionSelected(option) {
-        if (this.multiple && this.mutableValue) {
           let selected = false
-          this.mutableValue.forEach(opt => {
+          this.valueAsArray.forEach(value => {
-            if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
+            if (typeof value === 'object') {
-              selected = true
+              selected = this.optionObjectComparator(value, option)
-            } else if (typeof opt === 'object' && opt[this.label] === option) {
+            } else if (value === option || value === option[this.index]) {
-              selected = true
-            }
-            else if (opt === option) {
               selected = true
             }
           })
           return selected
-        }
+      },
 
-        return this.mutableValue === option
+      /**
+       * Determine if two option objects are matching.
+       *
+       * @param value {Object}
+       * @param option {Object}
+       * @returns {boolean}
+       */
+      optionObjectComparator(value, option) {
+        if (this.index && value === option[this.index]) {
+          return true
+        } else if ((value[this.label] === option[this.label]) || (value[this.label] === option)) {
+          return true
+        } else if (this.index && value[this.index] === option[this.index]) {
+          return true
+        }
+        return false;
+      },
+
+      /**
+       * Finds an option from this.options
+       * where option[this.index] matches
+       * the passed in value.
+       *
+       * @param value {Object}
+       * @returns {*}
+       */
+      findOptionByIndexValue(value) {
+        this.options.forEach(_option => {
+          if (JSON.stringify(_option[this.index]) === JSON.stringify(value)) {
+            value = _option
+          }
+        })
+        return value
       },
 
       /**
@@ -1070,7 +1093,7 @@
        * @return {Array}
        */
       valueAsArray() {
-        if (this.multiple) {
+        if (this.multiple && this.mutableValue) {
           return this.mutableValue
         } else if (this.mutableValue) {
           return [].concat(this.mutableValue)

test/unit/specs/Select.spec.js

@@ -851,6 +851,45 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].mutableValue).toEqual(vm.value)
 		})
 
+    it('can determine if an object is pre-selected', () => {
+      const vm = new Vue({
+        template: '<div><v-select :options="options" v-model="value" index="id"></v-select></div>',
+        components: {vSelect},
+        data: {
+          value: 'foo',
+          options: [{
+          	id: 'foo',
+						label: 'This is Foo'
+					}]
+        }
+      }).$mount()
+
+      expect(vm.$children[0].isOptionSelected({
+        id: 'foo',
+        label: 'This is Foo'
+      })).toEqual(true)
+    })
+
+    it('can determine if an object is selected after it has been chosen', () => {
+      const vm = new Vue({
+        template: '<div><v-select :options="options" index="id"></v-select></div>',
+        components: {vSelect},
+				data: {
+        	options: [{id: 'foo', label: 'FooBar'}]
+				}
+      }).$mount()
+
+			vm.$children[0].select({id: 'foo', label: 'FooBar'});
+
+      // Vue.nextTick(() => {
+        expect(vm.$children[0].isOptionSelected({
+          id: 'foo',
+          label: 'This is Foo'
+        })).toEqual(true)
+				// done()
+			// })
+    })
+
 		it('can accept an array of objects and pre-selected values (multiple)', () => {
 			const vm = new Vue({
 				template: '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
@@ -873,8 +912,9 @@ describe('Select.vue', () => {
 					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
 				}
 			}).$mount()
-			vm.$children[0].select('foo')
+			vm.$children[0].deselect('foo')
 			expect(vm.$children[0].mutableValue.length).toEqual(1)
+			expect(vm.$children[0].mutableValue).toEqual(['bar'])
 		})
 
 		it('can deselect an option when multiple is false', () => {
@@ -886,7 +926,7 @@ describe('Select.vue', () => {
 					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
 				}
 			}).$mount()
-			vm.$children[0].select('foo')
+			vm.$children[0].deselect('foo')
 			expect(vm.$children[0].mutableValue).toEqual(null)
 		})
 
@@ -925,39 +965,97 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].$refs.toggle.querySelector('.selected-tag').textContent).toContain('Baz')
 		})
 
-		it('will console.warn when options contain objects without a valid index key', (done) => {
+    it('will console.warn when attempting to select an option with an undefined index', () => {
-			spyOn(console, 'warn')
+      spyOn(console, 'warn')
-			const vm = new Vue({
+
-				template: '<div><v-select :index="index" :options="options"></v-select></div>',
+      const vm = new Vue({
-				data: {
+        template: '<div><v-select index="value" :options="options"></v-select></div>',
-					index: 'value',
+        data: {
-					options: [{label: 'Foo'}]
+          options: [{label: 'Foo'}]
-				}
+        }
-			}).$mount()
+      }).$mount()
-			vm.$children[0].open = true
+      vm.$children[0].select({label: 'Foo'})
-			Vue.nextTick(() => {
+      expect(console.warn).toHaveBeenCalledWith(
-				expect(console.warn).toHaveBeenCalledWith(
+          `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
-                	`[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
+      )
-				)
+    })
-				done()
+
-			})
+		it('can find the original option within this.options', () => {
+      const vm = new Vue({
+        template: '<div><v-select index="id" :options="options"></v-select></div>',
+        data: {
+          options: [{id: 1, label: 'Foo'},{id:2, label: 'Bar'}]
+        }
+      }).$mount()
+
+			expect(vm.$children[0].findOptionByIndexValue(1)).toEqual({id: 1, label: 'Foo'})
+			expect(vm.$children[0].findOptionByIndexValue({id: 1, label: 'Foo'})).toEqual({id: 1, label: 'Foo'})
 		})
 
-		it('will not console.warn when options contain objects without an index key', (done) => {
+		describe('And when option[index] is a nested object', () => {
-			spyOn(console, 'warn')
+			it('can determine if an object is pre-selected', () => {
-			const vm = new Vue({
+        const nestedOption = {
-				template: '<div><v-select :options="options"></v-select></div>',
+          value: {
-				data: {
+            nested: true
-					options: [{label: 'Foo'}]
+          },
-				}
+          label: 'foo'
-			}).$mount()
+        };
-			vm.$children[0].open = true
+        const vm = new Vue({
-			Vue.nextTick(() => {
+          template: '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
-				expect(console.warn).not.toHaveBeenCalledWith(
+          components: {vSelect},
-                	`[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
+          data: {
-				)
+            value: {
-				done()
+              nested: true
+            },
+            options: [nestedOption]
+          }
+        }).$mount()
+        expect(vm.$children[0].isOptionSelected({
+          nested: true
+        })).toEqual(true)
 			})
+
+			it('can determine if an object is selected after it is chosen', () => {
+        const nestedOption = {
+          value: {
+            nested: true
+          },
+          label: 'foo'
+        };
+        const vm = new Vue({
+          template: '<div><v-select index="value" :options="options"></v-select></div>',
+          components: {vSelect},
+          data: {
+            options: [nestedOption]
+          }
+        }).$mount()
+				vm.$children[0].select(nestedOption)
+        expect(vm.$children[0].isOptionSelected(nestedOption)).toEqual(true)
+			})
+
+      it('can determine a selected values label', () => {
+        const nestedOption = {
+          value: {
+            nested: true
+          },
+          label: 'foo'
+        };
+        const vm = new Vue({
+          template: '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
+          components: {vSelect},
+          data: {
+            value: {
+              nested: true
+            },
+            options: [nestedOption]
+          }
+        }).$mount()
+
+        expect(vm.$children[0].getOptionLabel({
+          nested: true
+        })).toEqual('foo')
+      })
+
 		})
 	})
 
@@ -1501,7 +1599,7 @@ describe('Select.vue', () => {
 					value: 'foo'
 				}
 			}).$mount()
-			
+
 			expect(vm.mutableValue).toEqual('foo')
 			vm.$el.querySelector( 'button.clear' ).click()
 			expect(vm.mutableValue).toEqual(null)
@@ -1520,6 +1618,6 @@ describe('Select.vue', () => {
 			const buttonEl = vm.$el.querySelector( 'button.clear' )
 			expect(buttonEl.disabled).toEqual(true);
 		})
-	
+
 	});
 })