Merge commit 'b92428101f1c6d4aa1fe864a88eb7079c245e009'

# Conflicts:
#	test/unit/specs/Select.spec.js

docs/gitbook/Basics/Options.md

@@ -33,6 +33,27 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
 
 [](codepen://sagalbot/aEjLPB?height=500)
 
+
+### Option index {#values}
+
+When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
+
+For example, consider an object with `value` and `label` properties:
+
+```json
+{
+  value: "CA",
+  label: "Canada"
+}
+```
+
+If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd use the `index` key:
+
+```html
+<v-select index="value" :options="countries"></v-select>
+```
+
+
 ### Null / Empty Options {#null}
 
 `vue-select` requires the `option` property to be an `array`. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop. If you need a `null`/`empty` value, use an empty array `[]`.

src/components/Select.vue

@@ -522,9 +522,25 @@
         default: 'label'
       },
 
+      /**
+       * Tells vue-select what key to use when generating option
+       * values when each `option` is an object.
+       * @type {String}
+       */
+      index: {
+        type: String,
+        default: null
+      },
+
       /**
        * 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}
@@ -532,6 +548,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(
@@ -540,9 +560,7 @@
                 'http://sagalbot.github.io/vue-select/#ex-labels'
               )
             }
-            if (this.label && option[this.label]) {
+            return option[this.label]
-              return option[this.label]
-            }
           }
           return option;
         }
@@ -786,7 +804,15 @@
           if (this.taggable && !this.optionExists(option)) {
             option = this.createOption(option)
           }
-
+          if(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]
           } else if (this.multiple) {
@@ -808,7 +834,7 @@
         if (this.multiple) {
           let ref = -1
           this.mutableValue.forEach((val) => {
-            if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
+            if (val === option || (this.index && val === option[this.index]) || (typeof val === 'object' && val[this.label] === option[this.label])) {
               ref = val
             }
           })
@@ -867,22 +893,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
       },
 
       /**
@@ -1061,9 +1115,9 @@
       isValueEmpty() {
         if (this.mutableValue) {
           if (typeof this.mutableValue === 'object') {
-            return !Object.keys(this.mutableValue).length
+            return ! Object.keys(this.mutableValue).length
           }
-          return !this.mutableValue.length
+          return ! this.valueAsArray.length
         }
 
         return true;
@@ -1074,7 +1128,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

@@ -867,6 +867,241 @@ describe('Select.vue', () => {
 		})
 	})
 
+	describe('When index prop is defined', () => {
+		it('can accept an array of objects and pre-selected value (single)', () => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" :options="options" :value="value"></v-select></div>',
+				components: {vSelect},
+				data: {
+					index: 'value',
+					value: 'foo',
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			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>',
+				components: {vSelect},
+				data: {
+					index: 'value',
+					value: ['foo', 'bar'],
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			expect(vm.$children[0].mutableValue).toEqual(vm.value)
+		})
+
+		it('can deselect a pre-selected object', () => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
+				data: {
+					index: 'value',
+					value: ['foo', 'bar'],
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			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', () => {
+			const vm = new Vue({
+				template: `<div><v-select :index="index" :options="options" :value="value"></v-select></div>`,
+				data: {
+					index: 'value',
+					value: 'foo',
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			vm.$children[0].deselect('foo')
+			expect(vm.$children[0].mutableValue).toEqual(null)
+		})
+
+		it('can use v-model syntax for a two way binding to a parent component', (done) => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" :options="options" v-model="value"></v-select></div>',
+				components: {vSelect},
+				data: {
+					index: 'value',
+					value: 'foo',
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}]
+				}
+			}).$mount()
+
+			expect(vm.$children[0].value).toEqual('foo')
+			expect(vm.$children[0].mutableValue).toEqual('foo')
+
+			vm.$children[0].mutableValue = 'bar'
+
+			Vue.nextTick(() => {
+				expect(vm.value).toEqual('bar')
+				done()
+			})
+		}),
+
+    it('can work with an array of integers', () => {
+      const vm = new Vue({
+        template: '<div><v-select :options="[1,2,3,4,5]" v-model="value"></v-select></div>',
+        components: {vSelect},
+        data: {
+          value: 5,
+        }
+      }).$mount()
+
+      expect(vm.$children[0].isOptionSelected(5)).toEqual(true)
+      expect(vm.$children[0].isValueEmpty).toEqual(false)
+    })
+
+		it('can generate labels using a custom label key', () => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" label="name" :options="options" v-model="value" :multiple="true"></v-select></div>',
+				components: {vSelect},
+				data: {
+					index: 'value',
+					value: ['baz'],
+					options: [{value: 'foo', name: 'Foo'}, {value: 'baz', name: 'Baz'}]
+				}
+			}).$mount()
+			expect(vm.$children[0].$refs.toggle.querySelector('.selected-tag').textContent).toContain('Baz')
+		})
+
+    it('will console.warn when attempting to select an option with an undefined index', () => {
+      spyOn(console, 'warn')
+
+      const vm = new Vue({
+        template: '<div><v-select index="value" :options="options"></v-select></div>',
+        data: {
+          options: [{label: 'Foo'}]
+        }
+      }).$mount()
+      vm.$children[0].select({label: 'Foo'})
+      expect(console.warn).toHaveBeenCalledWith(
+          `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
+      )
+    })
+
+		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'})
+		})
+
+		describe('And when option[index] is a nested object', () => {
+			it('can determine if an object is pre-selected', () => {
+        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].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')
+      })
+
+		})
+	})
+
 	describe('When Tagging Is Enabled', () => {
 		it('can determine if a given option string already exists', () => {
 			const vm = new Vue({
@@ -1378,7 +1613,7 @@ describe('Select.vue', () => {
     })
 
 
-    it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', () => {
+    it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', (done) => {
       const vm = new Vue({
         template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
         data: {
@@ -1421,7 +1656,7 @@ describe('Select.vue', () => {
 		})
 	})
 
-	describe( 'Clear button', () => {
+	describe('Clear button', () => {
 
 		it( 'should be displayed on single select when value is selected', () => {
 			const VueSelect = Vue.extend( vSelect )