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
1.6 KiB
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.
<v-select v-model="selected"></v-select>
If you don't require the value to be synced, you can also pass the prop directly:
<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:
<v-select multiple v-model="selected"></v-select>
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.
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:
{
value: "CA",
label: "Canada"
}
If you wanted to return CA in the dropdown when Canada is selected, you'd use the index key:
<v-select index="value" :options="countries"></v-select>