- Dashboard
My Library
- Base Components
- Base Pages
- My Library
- Ag Grid Table Page
Metronic Components
- Vue Bootstrap
- Vuetify
Metronic Custom
- Error Pages
- Wizard
Quick Actions
23 tasks pending
System Messages
Notifications
Another purpose persuade Due in 2 Days
+28% Would be to people Due in 2 Days
+50% Purpose would be to persuade Due in 2 Days
-27% The best product Due in 2 Days
+8% 5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry
Form Select
- Vue Bootstrap
- Form Select
Form Select Bootstrap custom <select> using custom styles. Optionally specify options based on an array, array of objects, or an object. See documentation.
Form Select
<div>
<b-form-select v-model="selected" :options="options"></b-form-select>
<b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</div>export default {
data() {
return {
selected: null,
options: [
{ value: null, text: 'Please select an option' },
{ value: 'a', text: 'This is First option' },
{ value: 'b', text: 'Selected Option' },
{ value: { C: '3PO' }, text: 'This is an option with object value' },
{ value: 'd', text: 'This one is disabled', disabled: true }
]
}
}
} Generate your select options by passing an array or object to the options props:
Selected:
Selected:
Options and optgroups
<div>
<b-form-select v-model="selected" class="mb-3">
<option :value="null">Please select an option</option>
<option value="a">Option A</option>
<option value="b" disabled>Option B (disabled)</option>
<optgroup label="Grouped Options">
<option :value="{ C: '3PO' }">Option with object value</option>
<option :value="{ R: '2D2' }">Another option with object value</option>
</optgroup>
</b-form-select>
<div class="mt-2">Selected: <strong>{{ selected }}</strong></div>
</div>export default {
data() {
return {
selected: null
}
}
} Selected:
Changing the option field names
<div>
<b-form-select
v-model="selected"
:options="options"
class="mb-3"
value-field="item"
text-field="name"
disabled-field="notEnabled"
></b-form-select>
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</div>export default {
data() {
return {
selected: 'A',
options: [
{ item: 'A', name: 'Option A' },
{ item: 'B', name: 'Option B' },
{ item: 'D', name: 'Option C', notEnabled: true },
{ item: { d: 1 }, name: 'Option D' },
]
}
}
} If you want to customize the field property names (for example using name field for display text) you can easily change them by setting the text-field, html-field, value-field, and disabled-field props to a string that contains the property name you would like to use:
Selected: A
Value in single mode
<div>
<b-form-select v-model="selected" :options="options"></b-form-select>
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</div>export default {
data() {
return {
selected: null,
options: [
{ value: null, text: 'Please select some item' },
{ value: 'a', text: 'This is First option' },
{ value: 'b', text: 'Default Selected Option' },
{ value: 'c', text: 'This is another option' },
{ value: 'd', text: 'This one is disabled', disabled: true },
]
}
}
} In non multiple mode, <b-form-select> returns the a single value of the currently selected option.
Selected: