0
# Core Selection
1
2
Essential selection functionality supporting both single and multiple selection modes, with comprehensive value management and state tracking.
3
4
## Capabilities
5
6
### Selection Props
7
8
Core properties that control selection behavior and value management.
9
10
```javascript { .api }
11
/**
12
* Currently selected value - similar to input value attribute
13
* Listen for changes with 'input' event for v-model support
14
*/
15
value: Object | String | null
16
17
/**
18
* Enable multiple selection mode
19
* When true, value should be an array
20
*/
21
multiple: Boolean // default: false
22
23
/**
24
* Array of available options for selection
25
* Can be strings or objects
26
*/
27
options: Array // default: []
28
29
/**
30
* Disable the entire component
31
*/
32
disabled: Boolean // default: false
33
34
/**
35
* Show clear button to remove all selections
36
*/
37
clearable: Boolean // default: true
38
39
/**
40
* Allow deselecting options by clicking them in the dropdown
41
*/
42
deselectFromDropdown: Boolean // default: false
43
```
44
45
### Option Configuration
46
47
Properties that control how options are processed and displayed.
48
49
```javascript { .api }
50
/**
51
* Key to use for option labels when options are objects
52
*/
53
label: String // default: 'label'
54
55
/**
56
* Transform option objects for v-model binding
57
* Useful for returning only ID instead of full object
58
*/
59
reduce: Function // default: (option) => option
60
61
/**
62
* Generate label text for display
63
* If option is object, returns option[this.label] by default
64
*/
65
getOptionLabel: Function
66
67
/**
68
* Generate unique identifier for each option
69
* Uses option.id if available, otherwise serializes to JSON
70
*/
71
getOptionKey: Function
72
73
/**
74
* Determine if an option is selectable
75
* Non-selectable options are displayed but disabled
76
*/
77
selectable: Function // default: (option) => true
78
79
/**
80
* Sets the id attribute of the input element
81
* Useful for form integration and accessibility
82
*/
83
inputId: String // default: null
84
85
/**
86
* Control whether selected value resets when options change
87
* Can be boolean or function for custom logic
88
* @param newOptions - New options array
89
* @param oldOptions - Previous options array
90
* @param selectedValue - Current selected value
91
*/
92
resetOnOptionsChange: Boolean | Function // default: false
93
```
94
95
### Selection Methods
96
97
Core methods for managing selected values.
98
99
```javascript { .api }
100
/**
101
* Select or deselect a given option
102
* Handles both single and multiple selection modes
103
* @param option - The option to select/deselect
104
*/
105
select(option: Object | String): void
106
107
/**
108
* Remove an option from selection
109
* @param option - The option to deselect
110
*/
111
deselect(option: Object | String): void
112
113
/**
114
* Clear all selected values
115
*/
116
clearSelection(): void
117
118
/**
119
* Check if the given option is currently selected
120
* @param option - Option to check
121
* @returns Whether option is selected
122
*/
123
isOptionSelected(option: Object | String): Boolean
124
125
/**
126
* Check if option can be removed via dropdown
127
* @param option - Option to check
128
* @returns Whether option can be deselected
129
*/
130
isOptionDeselectable(option: Object | String): Boolean
131
132
/**
133
* Compare two option objects for equality
134
* @param a - First option
135
* @param b - Second option
136
* @returns Whether options are equal
137
*/
138
optionComparator(a: Object, b: Object): Boolean
139
```
140
141
### Selection State
142
143
Computed properties and data that track selection state.
144
145
```javascript { .api }
146
// Computed properties
147
computed: {
148
/**
149
* Currently selected options (always returns array)
150
*/
151
selectedValue: Array,
152
153
/**
154
* Whether any options are selected
155
*/
156
isValueEmpty: Boolean,
157
158
/**
159
* Whether to show the clear button
160
*/
161
showClearButton: Boolean
162
}
163
164
// Data properties
165
data: {
166
/**
167
* Internal value when no value prop is provided
168
*/
169
_value: Array
170
}
171
```
172
173
### Selection Events
174
175
Events emitted during selection operations.
176
177
```javascript { .api }
178
/**
179
* Emitted when selected value changes (for v-model)
180
* @param value - New selected value
181
*/
182
'input': (value: any) => void
183
184
/**
185
* Emitted before an option is selected
186
* @param option - Option being selected
187
*/
188
'option:selecting': (option: Object | String) => void
189
190
/**
191
* Emitted after an option is selected
192
* @param option - Option that was selected
193
*/
194
'option:selected': (option: Object | String) => void
195
196
/**
197
* Emitted before an option is deselected
198
* @param option - Option being deselected
199
*/
200
'option:deselecting': (option: Object | String) => void
201
202
/**
203
* Emitted after an option is deselected
204
* @param option - Option that was deselected
205
*/
206
'option:deselected': (option: Object | String) => void
207
```
208
209
## Usage Examples
210
211
### Single Selection
212
213
```vue
214
<template>
215
<v-select
216
v-model="selectedOption"
217
:options="options"
218
placeholder="Choose one option..."
219
/>
220
</template>
221
222
<script>
223
export default {
224
data() {
225
return {
226
selectedOption: null,
227
options: ['Option 1', 'Option 2', 'Option 3']
228
};
229
}
230
};
231
</script>
232
```
233
234
### Multiple Selection
235
236
```vue
237
<template>
238
<v-select
239
v-model="selectedOptions"
240
:options="options"
241
multiple
242
placeholder="Choose multiple options..."
243
/>
244
</template>
245
246
<script>
247
export default {
248
data() {
249
return {
250
selectedOptions: [],
251
options: ['Option 1', 'Option 2', 'Option 3']
252
};
253
}
254
};
255
</script>
256
```
257
258
### Object Options with Reduction
259
260
```vue
261
<template>
262
<v-select
263
v-model="selectedUserId"
264
:options="users"
265
label="name"
266
:reduce="user => user.id"
267
placeholder="Select a user..."
268
/>
269
</template>
270
271
<script>
272
export default {
273
data() {
274
return {
275
selectedUserId: null,
276
users: [
277
{ id: 1, name: 'John Doe', email: 'john@example.com' },
278
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }
279
]
280
};
281
}
282
};
283
</script>
284
```
285
286
### Custom Selection Logic
287
288
```vue
289
<template>
290
<v-select
291
v-model="selected"
292
:options="products"
293
:selectable="isSelectable"
294
label="name"
295
@option:selected="onProductSelected"
296
/>
297
</template>
298
299
<script>
300
export default {
301
data() {
302
return {
303
selected: null,
304
products: [
305
{ id: 1, name: 'Laptop', available: true },
306
{ id: 2, name: 'Phone', available: false },
307
{ id: 3, name: 'Tablet', available: true }
308
]
309
};
310
},
311
methods: {
312
isSelectable(option) {
313
return option.available;
314
},
315
onProductSelected(product) {
316
console.log('Selected product:', product.name);
317
}
318
}
319
};
320
</script>
321
```
322
323
### Programmatic Selection Control
324
325
```vue
326
<template>
327
<div>
328
<v-select
329
v-model="selected"
330
:options="options"
331
ref="vSelect"
332
/>
333
<button @click="selectFirst">Select First</button>
334
<button @click="clearAll">Clear All</button>
335
</div>
336
</template>
337
338
<script>
339
export default {
340
data() {
341
return {
342
selected: null,
343
options: ['Option 1', 'Option 2', 'Option 3']
344
};
345
},
346
methods: {
347
selectFirst() {
348
if (this.options.length > 0) {
349
this.$refs.vSelect.select(this.options[0]);
350
}
351
},
352
clearAll() {
353
this.$refs.vSelect.clearSelection();
354
}
355
}
356
};
357
</script>
358
```