1
1
# vue-select [ ![ Build Status] ( https://travis-ci.org/sagalbot/vue-select.svg?branch=master )] ( https://travis-ci.org/sagalbot/vue-select ) [ ![ Code Coverage] ( https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square )] ( https://codeclimate.com/github/sagalbot/vue-select ) [ ![ No Dependencies] ( https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square )] ( https://gemnasium.com/github.com/sagalbot/vue-select ) ![ MIT License] ( https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square ) ![ Current Release] ( https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square )
2
2
3
- > A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.
4
-
5
- Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery, while providing the same awesome data-binding features you expect from Vue. Vue-select has no JavaScript dependencies other than Vue, and is designed to mimic [ Select2] ( https://github.com/select2/select2 ) .
6
-
3
+ > A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
7
4
8
5
#### Features
9
-
10
- - ** AJAX Support +v1.2.0**
11
- - Tagging Support ** +v.1.1.0**
12
- - No JS Dependencies
6
+ - AJAX Support
7
+ - Tagging
8
+ - No JS Dependenciesp
13
9
- List Filtering/Searching
14
10
- Supports Vuex
15
11
- Select Single/Multiple Options
16
12
- Bootstrap Friendly Markup
17
13
- +95% Test Coverage
18
14
19
- #### Upcoming/In Progress
20
-
21
- - ~~ Tagging (adding options not present in list, see ` taggable ` branch)~~ ** +v.1.1.0**
22
- - ~~ Asyncronous Option Loading~~ ** +v.1.2.0**
23
- - Rich Option Templating
24
-
25
- ## Live Examples & Docs
15
+ ## Documentation
26
16
- [ Demo & Docs] ( http://sagalbot.github.io/vue-select/ )
27
17
- [ Live Example on JSBin] ( http://jsbin.com/saxaru/5/edit?html,js,output )
28
18
29
19
## Install / Usage
30
20
31
- #### NPM Based WorkFlows
21
+ ** Vue Compatability**
22
+ Version ` 2.x ` of vue-select is compatible with Vue ` 2.x ` . If you are on Vue ` 1.x ` , you will need to use ` 1.x ` of vue-select.
23
+
24
+ #### NPM
25
+
32
26
``` bash
33
27
$ npm install vue-select
34
28
```
35
29
36
30
``` html
37
31
<template >
38
- <div id = " myApp " >
39
- <v-select :value.sync = " selected " :options =" options" ></v-select >
32
+ <div >
33
+ <v-select v-model = " select " :options =" options" ></v-select >
40
34
</div >
41
35
</template >
42
36
@@ -54,17 +48,15 @@ export default {
54
48
</script >
55
49
```
56
50
57
- #### Browser Globals
58
-
59
- ` v1.3.0+ ` no longer requires any toolchain to use the component:
51
+ #### Browser Globals ` v1.3.0+ `
60
52
61
- Just include ` vue ` & ` vue-select.js ` - I recommend using [ npmcdn ] ( https://npmcdn .com/#/ ) .
53
+ Just include ` vue ` & ` vue-select.js ` - I recommend using [ unpkg ] ( https://unpkg .com/#/ ) .
62
54
63
55
``` html
64
56
<!-- use the latest release -->
65
- <script src =" https://npmcdn .com/vue-select@latest" ></script >
57
+ <script src =" https://unpkg .com/vue-select@latest" ></script >
66
58
<!-- or point to a specific release -->
67
- <script src =" https://npmcdn .com/vue-select@1.30 " ></script >
59
+ <script src =" https://unpkg .com/vue-select@1.3.3 " ></script >
68
60
```
69
61
Then register the component in your javascript:
70
62
@@ -74,154 +66,4 @@ Vue.component('v-select', VueSelect.VueSelect);
74
66
75
67
From there you can use as normal. Here's an [ example on JSBin] ( http://jsbin.com/saxaru/5/edit?html,js,output ) .
76
68
77
- ## Parameters
78
- ``` javascript
79
- /**
80
- * Contains the currently selected value. Very similar to a
81
- * `value` attribute on an <input>. You can listen for changes
82
- * using 'change' event using v-on
83
- * @type {Object||String||null}
84
- */
85
- value: {
86
- default: null
87
- },
88
-
89
- /**
90
- * An array of strings or objects to be used as dropdown choices.
91
- * If you are using an array of objects, vue-select will look for
92
- * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
93
- * custom label key can be set with the `label` prop.
94
- * @type {Object}
95
- */
96
- options: {
97
- type: Array ,
98
- default () { return [] },
99
- },
100
-
101
- /**
102
- * Sets the max-height property on the dropdown list.
103
- * @deprecated
104
- * @type {String}
105
- */
106
- maxHeight: {
107
- type: String ,
108
- default: ' 400px'
109
- },
110
-
111
- /**
112
- * Enable/disable filtering the options.
113
- * @type {Boolean}
114
- */
115
- searchable: {
116
- type: Boolean ,
117
- default: true
118
- },
119
-
120
- /**
121
- * Equivalent to the `multiple` attribute on a `<select>` input.
122
- * @type {Object}
123
- */
124
- multiple: {
125
- type: Boolean ,
126
- default: false
127
- },
128
-
129
- /**
130
- * Equivalent to the `placeholder` attribute on an `<input>`.
131
- * @type {Object}
132
- */
133
- placeholder: {
134
- type: String ,
135
- default: ' '
136
- },
137
-
138
- /**
139
- * Sets a Vue transition property on the `.dropdown-menu`. vue-select
140
- * does not include CSS for transitions, you'll need to add them yourself.
141
- * @type {String}
142
- */
143
- transition: {
144
- type: String ,
145
- default: ' expand'
146
- },
147
-
148
- /**
149
- * Enables/disables clearing the search text when an option is selected.
150
- * @type {Boolean}
151
- */
152
- clearSearchOnSelect: {
153
- type: Boolean ,
154
- default: true
155
- },
156
-
157
- /**
158
- * Tells vue-select what key to use when generating option
159
- * labels when each `option` is an object.
160
- * @type {String}
161
- */
162
- label: {
163
- type: String ,
164
- default: ' label'
165
- },
166
-
167
- /**
168
- * An optional callback function that is called each time the selected
169
- * value(s) change. When integrating with Vuex, use this callback to trigger
170
- * an action, rather than using :value.sync to retreive the selected value.
171
- * @type {Function}
172
- * @default {null}
173
- */
174
- onChange: Function ,
175
-
176
- /**
177
- * Enable/disable creating options from searchInput.
178
- * @type {Boolean}
179
- */
180
- taggable: {
181
- type: Boolean ,
182
- default: false
183
- },
184
-
185
- /**
186
- * When true, newly created tags will be added to
187
- * the options list.
188
- * @type {Boolean}
189
- */
190
- pushTags: {
191
- type: Boolean ,
192
- default: false
193
- },
194
-
195
- /**
196
- * User defined function for adding Options
197
- * @type {Function}
198
- */
199
- createOption: {
200
- type: Function ,
201
- default : function (newOption ) {
202
- if (typeof this .options [0 ] === ' object' ) {
203
- return {[this .label ]: newOption}
204
- }
205
- return newOption
206
- }
207
- }
208
- ```
209
-
210
-
211
- ## Build Setup for Contributing
212
-
213
- If there's a feature you'd like to see or you find a bug, feel free to fork and submit a PR. If your adding functionality, add tests to go with it.
214
-
215
- ``` bash
216
- # install dependencies
217
- npm install
218
-
219
- # serve with hot reload at localhost:8080
220
- npm run dev
221
-
222
- # run unit tests
223
- npm test
224
-
225
- # run unit tests on save
226
- npm run test-watch
227
- ```
69
+ ** For more information, please visit the [ documentation] ( https://sagalbot.github.io/vue-select )
0 commit comments