mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-29 05:14:04 +03:00
Jeff Sagal
699d595f9a
* remove `index` in favour of `reduce`, tests passing * refactor findOptionFromReducedValue * - always use getOptionLabel in comparisons * - refactor deselect method - add missing jsdoc blocks - organize methods * bump documentation
80 lines
2.2 KiB
Markdown
80 lines
2.2 KiB
Markdown
## Getting / Setting
|
|
|
|
### `v-model`
|
|
|
|
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" />
|
|
```
|
|
|
|
### `value` prop & `input` event
|
|
|
|
If you don't require the `value` to be synced, but you need to preselect a value, you can use the `value` prop. It will
|
|
accept strings, numbers or objects. If you're using a `multiple` v-select, you'll want to pass an array.
|
|
|
|
```html
|
|
<v-select :value="selected" />
|
|
```
|
|
|
|
The `value` prop is very useful when using a state management tool, like Vuex. `vue-select` will emit an `input` event
|
|
any time a value changes.
|
|
|
|
```html
|
|
<v-select :value="selected" @input="setSelected" />
|
|
```
|
|
|
|
```js
|
|
methods: {
|
|
setSelected(value) {
|
|
// do something with selected value
|
|
}
|
|
}
|
|
```
|
|
## Transforming Selections
|
|
|
|
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection.
|
|
|
|
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:
|
|
|
|
```js
|
|
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.
|
|
|
|
```html
|
|
<v-select :options="options" :reduce="country => country.code" label="country" />
|
|
```
|
|
|
|
The `reduce` property also works well when you have a deeply nested value:
|
|
|
|
```
|
|
{
|
|
country: 'canada',
|
|
meta: {
|
|
id: '1',
|
|
code: 'ca'
|
|
}
|
|
}
|
|
```
|
|
|
|
```html
|
|
<v-select :options="options" :reduce="country => country.value.id" label="country" />
|
|
```
|
|
|
|
## 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.
|
|
|
|
|
|
```html
|
|
<v-select multiple v-model="selected" :options="['foo','bar']" />
|
|
```
|
|
<v-select multiple :options="['foo','bar']" />
|