Merge pull request sagalbot#421 from MarZab/issue-350

sagalbot · web-flow · commit 58690791e867 · 2018-01-18T09:02:17.000-08:00
The temporary option when using taggable should be a Object
diff --git a/dev.html b/dev.html
@@ -47,6 +47,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
@@ -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>
