Form Select - Bootstrap-Vue
https://bootstrap-vue.github.io/docs/components/form-select
HTML
<link rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form-select v-model="selected"
:options="options"
calss="mb-3"
></b-form-select>
<div>Selected: <strong>{{selected}}</strong></div>
</div>
CSS
#app {
padding: 20px;
height: 300px;
}
JavaScript
new Vue({
el: '#app',
data: {
selected: null,
options: [
{
text: 'Omer',
value: null
},
{
text: 'This is First option',
value: 'a'
}, {
text: 'Default Selected Option',
value: 'b'
}, {
text: 'This is another option',
value: 'c'
}, {
text: 'This one is disabled',
value: 'd',
disabled: true
}]
},
})