mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
Merge pull request #421 from MarZab/issue-350
The temporary option when using taggable should be a Object
This commit is contained in:
@@ -47,6 +47,14 @@
|
|||||||
{{option.label}} ({{option.value}})
|
{{option.label}} ({{option.value}})
|
||||||
</template>
|
</template>
|
||||||
</v-select>
|
</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">
|
<v-select multiple placeholder="custom label template" :options="options">
|
||||||
<span
|
<span
|
||||||
slot="selected-option-container"
|
slot="selected-option-container"
|
||||||
|
|||||||
@@ -313,9 +313,9 @@
|
|||||||
<div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
|
<div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
|
||||||
|
|
||||||
<slot v-for="option in valueAsArray" name="selected-option-container"
|
<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">
|
<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) }}
|
{{ getOptionLabel(option) }}
|
||||||
</slot>
|
</slot>
|
||||||
<button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
|
<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 }">
|
<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">
|
<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)">
|
<a @mousedown.prevent="select(option)">
|
||||||
<slot name="option" v-bind="option">
|
<slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
|
||||||
{{ getOptionLabel(option) }}
|
{{ getOptionLabel(option) }}
|
||||||
</slot>
|
</slot>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user