2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-16 09:10:33 +03:00

- move gitbook files into their own folder at docs/gitbook

- rebuild homepage at `docs/homepage`
This commit is contained in:
Jeff
2018-01-13 15:11:17 -08:00
parent 022f6e8874
commit 0d62251558
40 changed files with 6031 additions and 265 deletions
View File
+36
View File
@@ -0,0 +1,36 @@
## Dropdown Options {#options}
`vue-select` accepts arrays of strings or objects to use as options through the `options` prop:
```html
<v-select :options="['foo','bar']"></v-select>
```
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
<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
```
### Option Labels {#labels}
When the `options` array contains objects, `vue-select` looks for the `label` key to display by default. You can set your own label to match your source data using the `label` prop.
For example, consider an object with `countryCode` and `countryName` properties:
```json
{
countryCode: "CA",
countryName: "Canada"
}
```
If you wanted to display `Canada` in the dropdown, you'd use the `countryName` key:
```html
<v-select label="countryName" :options="countries"></v-select>
```
### Null / Empty Options {#emptyOptions}
`vue-select` requires the `option` property to be an `array`. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop. If you need a `null`/`empty` value, use an empty array `[]`.
+23
View File
@@ -0,0 +1,23 @@
## Selecting Values {#values}
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
<v-select v-model="selected"></v-select>
```
If you don't require the `value` to be synced, you can also pass the prop directly:
```html
<v-select :value="selected"></v-select>
```
This method allows you to pre-select a value(s), without syncing any changes to the parent component. This is also very useful when using a state management tool, like Vuex.
### Single/Multiple Selection {#multiple}
By default, `vue-select` supports choosing a single value. If you need multiple values, use the `multiple` prop:
```html
<v-select multiple v-model="selected"></v-select>
```