mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-20 03:09:36 +03:00
Jeff Sagal
dc91310860
* - add autoprefixer - add cssnano - add postcss-loader - remove unused packages * create RTL scss module * add vs__ prefix to open-indicator, extract to module * module for dropdown-toggle * vs__clear module * vs__dropdown-menu module * rename `selected-tag` to `vs__selected` * remove rtl class * remove dropdown class * search-input scss module * move animations to global module * refactor dropdown list items * - spinner slot is now scoped with `loading` variable - move spinner to scss module * apply vs__search class directly to search input: if you're using the slot, you might not want default styles * finish global modules * make RTL a component state * - update component states to use vs-- prefix - rename dropdownClasses to stateClasses * remove unused property * Closes #760 * fix states * more state fixes * rename .close to vs__deselect * - simplify dev.html - start on 'sandbox' development * update build * - update webpack config - move Sandbox to VuePress folder * update external framework version links * assign grid areas, ensure 100% height outside of docs * limit specificity * first pass at assigning variables * assign 'darkest' * remove max-height prop * rename 'component' variables to 'state' * update badges * add deprecation notice to docs * bump travis config * add coveralls coverage reporter * bump netlify config * additional pass pulling up to variables * start converting to SVG icons * middle align action icons * update netlify config * netlify bump * fix travis * fix travis * try lcov * netlify attempt * prune old packages * bump travis config
54 lines
1.6 KiB
Markdown
54 lines
1.6 KiB
Markdown
# Selecting 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>
|
|
```
|
|
|
|
<CodePen url="Kqxbjw" height="250"/>
|
|
|
|
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
|
|
|
|
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>
|
|
```
|
|
|
|
<CodePen url="opMGro" height="250"/>
|
|
|
|
## Tagging
|
|
|
|
To allow input that's not present within the options, set the `taggable` prop to true.
|
|
If you want new tags to be pushed to the options list, set `push-tags` to true.
|
|
|
|
<CodePen url="XVoWxm" height="350"/>
|
|
|
|
## Return a Single Key from an Object
|
|
|
|
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
|
|
|
|
For example, consider an object with `value` and `label` properties:
|
|
|
|
```json
|
|
{
|
|
value: "CA",
|
|
label: "Canada"
|
|
}
|
|
```
|
|
|
|
If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd use the `index` key:
|
|
|
|
```html
|
|
<v-select index="value" :options="countries"></v-select>
|
|
```
|