Skip to content

Commit 6c037e0

Browse files
committed
more details in readme
1 parent d2aa19e commit 6c037e0

File tree

1 file changed

+32
-1
lines changed

1 file changed

+32
-1
lines changed

README.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
- **[Demo & Docs](http://sagalbot.github.io/vue-select/)**
1717
- **[Example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output)**
1818

19-
## Install & Basic Usage
19+
## Install
2020

2121
###### Vue Compatibility
2222
- `vue ~2.0` use `vue-select ~2.0`
@@ -69,4 +69,35 @@ You may now use the component in your markup
6969

7070
Here's an [example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output).
7171

72+
## Basic Usage
73+
74+
#### Syncing a Selected Value
75+
76+
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.
77+
78+
```html
79+
<v-select v-model="selected"></v-select>
80+
```
81+
```js
82+
new Vue({
83+
data: {
84+
selected: null
85+
}
86+
})
87+
```
88+
89+
#### Setting Options
90+
91+
`vue-select` accepts arrays of strings and objects to use as options through the `options` prop.
92+
93+
```html
94+
<v-select :options="['foo','bar']"></v-select>
95+
```
96+
97+
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.
98+
99+
```html
100+
<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
101+
```
102+
72103
### For more information, please visit the [vue-select documentation.](https://sagalbot.github.io/vue-select)

0 commit comments

Comments
 (0)