I need a way to trigger <select> or <b-form-select> and show a dropdown list of options on mouseover. No use of JQuery or any external plugins other than Vue.js.
1
0
0
From my understanding, you want to show/hide <b-form-select> on the mouseover and mouseleave events. If so, I have some suggestions:
mouseover and mouseleave events. We can fire the mouse event directly by appending native to itself, but once hidden there is no way to restore the dropdown on mouseover again. v-show directive. We can easily set the value via mouse events. Working Demonstration:
new Vue({
el: '#app',
data() {
return {
selected: null,
isVisible: true,
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 }
]
}
},
methods: {
onOver() {
this.isVisible = true;
},
onLeave() {
this.isVisible = false;
}
}
})
.wrapper-div {
height: 20px;
}
sssccc sssccc [email?protected]/dist/bootstrap-vue.css"/>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
