diff --git a/docs/guide/values.md b/docs/guide/values.md index ec2d655..46907e4 100644 --- a/docs/guide/values.md +++ b/docs/guide/values.md @@ -132,3 +132,45 @@ If you want added tags to be pushed to the options array, set `push-tags` to tru +### 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 + +``` + + +