Merge commit 'b92428101f1c6d4aa1fe864a88eb7079c245e009'

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

src/components/Select.vue

@@ -360,13 +360,13 @@
               aria-label="Search for option"
       >
 
-      <button 
-        v-show="showClearButton" 
-        :disabled="disabled" 
+      <button
+        v-show="showClearButton"
+        :disabled="disabled"
         @click="clearSelection"
-        type="button" 
-        class="clear" 
-        title="Clear selection" 
+        type="button"
+        class="clear"
+        title="Clear selection"
       >
         <span aria-hidden="true">&times;</span>
       </button>
@@ -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 => {
-            if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
-              selected = true
-            } else if (typeof opt === 'object' && opt[this.label] === option) {
-              selected = true
-            }
-            else if (opt === option) {
+          this.valueAsArray.forEach(value => {
+            if (typeof value === 'object') {
+              selected = this.optionObjectComparator(value, option)
+            } else if (value === option || value === option[this.index]) {
               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)