From 6c037e0500bbd6597b30ebea61f618914c93f95a Mon Sep 17 00:00:00 2001 From: Jeff Sagal Date: Sat, 4 Feb 2017 20:19:51 -0800 Subject: [PATCH] more details in readme --- README.md | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 768b67b..1fe9b2d 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ - **[Demo & Docs](http://sagalbot.github.io/vue-select/)** - **[Example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output)** -## Install & Basic Usage +## Install ###### Vue Compatibility - `vue ~2.0` use `vue-select ~2.0` @@ -69,4 +69,35 @@ You may now use the component in your markup Here's an [example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output). +## Basic Usage + +#### Syncing a Selected Value + +The most common use case for `vue-select` is to have the chosen value synced with a parent component. `vue-select` takes advantage of the `v-model` syntax to sync values with a parent. + +```html + +``` +```js +new Vue({ + data: { + selected: null + } +}) +``` + +#### Setting Options + +`vue-select` accepts arrays of strings and objects to use as options through the `options` prop. + +```html + +``` + +When provided an array of objects, `vue-select` will display a single value of the object. By default, `vue-select` will look for a key named 'label' on the object to use as display text. + +```html + +``` + ### For more information, please visit the [vue-select documentation.](https://sagalbot.github.io/vue-select)