add guide for reduce and taggable (sagalbot#827)

sagalbot · web-flow · commit 5215edded715 · 2019-04-13T11:39:55.000-07:00
diff --git 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
 
 <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}`"
+/>
+```  
+
+
+
