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
vue-select 
Everything you wish the native
<select>element could do, wrapped up into a zero dependency, highly extensible Vue component.
Want to help out as a primary contributor? Get in touch!
Features
- AJAX Support
- Tagging
- List Filtering/Searching
- Supports Vuex
- Select Single/Multiple Options
- Tested with Bootstrap 3/4, Bulma, Foundation
- +95% Test Coverage
- ~33kb minified with CSS
- Zero dependencies
Documentation
Install
Vue Compatibility
vue ~2.0usevue-select ~2.0vue ~1.0usevue-select ~1.0
NPM
Install the package. You should install vue-select@1.3.3 for use with vue ~1.0.
$ npm install vue-select
Register the component
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
You may now use the component in your markup
<v-select v-model="selected" :options="['foo','bar']"></v-select>
CDN
Just include vue & vue-select.js - I recommend using unpkg.
<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<!-- or point to a specific release -->
<script src="https://unpkg.com/vue-select@1.3.3"></script>
Then register the component in your javascript:
Vue.component('v-select', VueSelect.VueSelect);
You may now use the component in your markup
<v-select v-model="selected" :options="['foo','bar']"></v-select>
Here's an example on JSBin.
Basic Usage
Syncing a Selected Value
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>
new Vue({
data: {
selected: null
}
})
Setting Options
vue-select accepts arrays of strings and objects to use as options through the options prop.
<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.
<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>