mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

Remove foo bar (#826)

Browse Source 
* remove foo bar examples, move tagging to values

* update tagline, add headers to values

* hunting down more foos
This commit is contained in:
Jeff Sagal
2019-04-13 10:57:56 -07:00
committed by GitHub
parent 01ecee93d5
commit b34bf57861
4 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guide/values.md
+40 -13
View File
@@ -60,21 +60,29 @@ methods: {
```
## Transforming Selections
When the `options` array contains objects, vue-select returns the whole object as dropdown value upon selection.
When the `options` array contains objects, vue-select returns the whole object as dropdown value
upon selection. This approach makes no assumptions about the data you need, and provides a lot of
flexibility. However, there will be situations where maybe you just need to return a single key
from an object.
If you need to return a single key, or transform the data before it is synced, vue-select provides a `reduce` callback
that allows you to transform a selected option before it is passed to the `@input` event. Consider this data structure:
### Returning a single key with `reduce`
If you need to return a single key, or transform the selection before it is synced, vue-select
provides a `reduce` callback that allows you to transform a selected option before it is passed to
the `@input` event. Consider this data structure:
```js
let options = [{code: 'CA', country: 'Canada'}, ...];
let options = [{code: 'CA', country: 'Canada'}];
```
If we want to display the `country`, but return the `code` to `v-model`, we can use the `reduce` prop to receive
only the data that's required.
If we want to display the `country`, but return the `code` to `v-model`, we can use the `reduce`
prop to receive only the data that's required.
```html
<v-select :options="options" :reduce="country => country.code" label="country" />
```
### Deep Nested Values
The `reduce` property also works well when you have a deeply nested value:
@@ -82,26 +90,45 @@ The `reduce` property also works well when you have a deeply nested value:
{
country: 'canada',
meta: {
id: '1',
code: 'ca'
provinces: [...],
}
}
```
```html
<v-select :options="options" :reduce="country => country.value.id" label="country" />
<v-select :options="options" :reduce="country => country.meta.code" label="country" />
```
<reducer-nested-value />
## Single/Multiple Selection
By default, vue-select supports choosing a single value. If you need multiple values, use the `multiple` boolean prop,
much the same way you would on a native `<select>` element. When `multiple` is true, `v-model` or `value` should be
arrays.
By default, vue-select supports choosing a single value. If you need multiple values, use the
`multiple` boolean prop, much the same way you would on an HTML `<select>` element. When `multiple`
is true, `v-model` and `value` must be an array.
```html
<v-select multiple v-model="selected" :options="['foo','bar']" />
<v-select multiple v-model="selected" :options="['Canada','United States']" />
```
<v-select multiple :options="['foo','bar']" />
<v-select multiple :options="['Canada','United States']" />
## Tagging
To allow input that's not present within the options, set the `taggable` prop to true.
```html
<v-select taggable multiple />
```
<v-select taggable multiple />
If you want added tags to be pushed to the options array, set `push-tags` to true.
```html
<v-select taggable multiple />
```
<v-select taggable multiple push-tags />