mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
add guide for reduce and taggable (#827)
This commit is contained in:
@@ -132,3 +132,45 @@ If you want added tags to be pushed to the options array, set `push-tags` to tru
|
|||||||
|
|
||||||
<v-select taggable multiple push-tags />
|
<v-select taggable multiple push-tags />
|
||||||
|
|
||||||
|
### Using `taggable` & `reduce` together
|
||||||
|
|
||||||
|
When combining `taggable` with `reduce`, you must define the `createOption` prop. The
|
||||||
|
`createOption` function is responsible for defining the structure of the objects that Vue Select
|
||||||
|
will create for you when adding a tag. It should return a value that has the same properties as the
|
||||||
|
rest of your `options`.
|
||||||
|
|
||||||
|
If you don't define `createOption`, Vue Select will construct a simple object following this structure:
|
||||||
|
`{[this.label]: searchText}`. If you're using `reduce`, this is probably not what your options look
|
||||||
|
like, which is why you'll need to set the function yourself.
|
||||||
|
|
||||||
|
**Example**
|
||||||
|
|
||||||
|
We have a taggable select for adding books to a collection. We're just concerned about getting the
|
||||||
|
book title added, and our server side code will add the author details in a background process. The
|
||||||
|
user has already selected a book.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
title: "HTML5",
|
||||||
|
author: {
|
||||||
|
firstName: "Remy",
|
||||||
|
lastName: "Sharp"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<v-select
|
||||||
|
taggable
|
||||||
|
multiple
|
||||||
|
label="title"
|
||||||
|
:options="options"
|
||||||
|
:create-option="book => ({ title: book, author: { firstName: '', lastName: '' } })"
|
||||||
|
:reduce="book => `${book.author.firstName} ${book.author.lastName}`"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user