A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
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.0
usevue-select ~2.0
vue ~1.0
usevue-select ~1.0
NPM
Install the package. You should install [email protected]
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 scr="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/[email protected]"></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>