Every example would require the following plus the example specifics
<advanced-select v-model="value" :options="options" />
import AdvancedSelect from '@/components/AdvancedSelect.vue';
export default {
components: {
AdvancedSelect,
},
data: () => ({
// the list of options to display
options: [],
// the value to preselect
value: null,
}),
};<advanced-select id="basic-setup" v-model="value" :options="options" :disabled="disabled" />Or as the default slot
<advanced-select v-model="secondValue" :disabled="disabled" > <option value="1">Text</option> <option value="2">Text 2</option> </advanced-select>
export default {
...
data: () => ({
options: [
{ value: 1, text: 'One' },
{ value: 2, text: 'Two' },
],
value: null,
secondValue: '1',
disabled: false,
}),
};Additionally, options can be disabled (item "Four")
and a limit of items to show as selected can be specified (:displayMax="2")
<advanced-select id="multiple-first" v-model="value" :options="options" :multiple="multiple" :displayMax="2" />
export default {
...
data: () => ({
options: [
{ value: 1, text: 'One' },
{
label: 'Group 1',
options: [
{ value: 3, text: 'Three' },
{ value: 4, text: 'Four', disabled: true },
{ value: 5, text: 'Five' },
],
},
{
label: 'Group 2',
options: [
{ value: 6, text: 'Six' },
{ value: 7, text: 'Seven' },
{ value: 8, text: 'Eight' },
],
},
],
value: [1],
multiple: true,
}),
};<advanced-select v-model="value" :options="options" :multiple="multiple" :collapse-headers="true" :displayMax="2" />
<advanced-select v-model="value" :options="localOptions" :multiple="multiple" :search="search" :controls="controls" />
export default {
...
data: () => ({
localOptions: [
{ value: 1, text: 'One' },
{
label: 'Group 1',
options: [
{ value: 3, text: 'Three' },
{ value: 4, text: 'Four', disabled: true },
{ value: 5, text: 'Five' },
],
},
{
label: 'Group 2',
options: [
{ value: 6, text: 'Six' },
{ value: 7, text: 'Seven' },
{ value: 8, text: 'Eight' },
],
},
],
value: [1],
multiple: true,
search: true,
controls: true,
}),
};Search is performed by the parent. Options could be loaded remotely then served to the component
<advanced-select v-model="value" :options="options" :multiple="multiple" :search="search" :remote="remote" :controls="controls" />
export default {
...
data: () => ({
options: [
{ value: 1, text: 'One' },
{
label: 'Group 1',
options: [
{ value: 3, text: 'Three' },
{ value: 4, text: 'Four', disabled: true },
{ value: 5, text: 'Five' },
],
},
{
label: 'Group 2',
options: [
{ value: 6, text: 'Six' },
{ value: 7, text: 'Seven' },
{ value: 8, text: 'Eight' },
],
},
],
value: [1],
multiple: true,
search: true,
remote: true,
controls: true,
}),
};