From 592df533b78783f0ea9a234828ce275edd53061f Mon Sep 17 00:00:00 2001
From: Marko Zabreznik <marko@zabreznik.net>
Date: Sat, 13 Jan 2018 11:53:34 +0100
Subject: [PATCH] Fix for https://github.com/sagalbot/vue-select/issues/350

Builds on https://github.com/sagalbot/vue-select/pull/420 and fixes the string options array edge case.

Added dev.html example.
---
 dev.html                  | 8 ++++++++
 src/components/Select.vue | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/dev.html b/dev.html
index 1a39950..cfc55ef 100644
--- a/dev.html
+++ b/dev.html
@@ -46,6 +46,14 @@
                 {{option.label}} ({{option.value}})
             </template>
         </v-select>
+        <v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
+            <template slot="selected-option" slot-scope="option">
+                {{option.label}}
+            </template>
+            <template slot="option" slot-scope="option">
+                {{option.label}}
+            </template>
+        </v-select>
         <v-select multiple placeholder="custom label template" :options="options">
             <span
                     slot="selected-option-container"
diff --git a/src/components/Select.vue b/src/components/Select.vue
index e1fc9c9..cbfccfb 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -313,9 +313,9 @@
     <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
 
       <slot v-for="option in valueAsArray" name="selected-option-container"
-            :option="option" :deselect="deselect" :multiple="multiple" :disabled="disabled">
+            :option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
         <span class="selected-tag" v-bind:key="option.index">
-          <slot name="selected-option" v-bind="option">
+          <slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
             {{ getOptionLabel(option) }}
           </slot>
           <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
@@ -368,7 +368,7 @@
       <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
         <li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
           <a @mousedown.prevent="select(option)">
-          <slot name="option" v-bind="option">
+          <slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
             {{ getOptionLabel(option) }}
           </slot>
           </a>