How do I enable dropdown on hover in vue bootstrap?

Question

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
  <b-dropdown-item>First Action</b-dropdown-item>
  <b-dropdown-item>Second Action</b-dropdown-item>
  <b-dropdown-item>Third Action</b-dropdown-item>
  <b-dropdown-divider></b-dropdown-divider>
  <b-dropdown-item active>Active action</b-dropdown-item>
  <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

The items should be shown when the dropdown button is hovered!

Answer 1

Not as straighforward as I thought but here is one example on how to convert this bootstrap-dropdown into a hoverable dropdown.

<template>
  <div @mouseover="onOver" @mouseleave="onLeave">
    <b-dropdown id="dropdown-1" text="Dropdown Button" ref="dropdown" class="m-md-2">
       <b-dropdown-item>First Action</b-dropdown-item>
       <b-dropdown-item>Second Action</b-dropdown-item>
       <b-dropdown-item>Third Action</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
  export default {
    methods: {
      onOver() {
        this.$refs.dropdown.visible = true;
      },
      onLeave() {
        this.$refs.dropdown.visible = false;
      }
    }
  }
</script>

The idea is to use v-on directives mouseover and mouseleave on a wrapper div (somehow the vue directive does not work on the b-vue component directly, but might be only me). Then use the event trigger to alter dropdown.visible state. Also in this example I make use of Vue's $refs to get hold of the dropdown within the script.

Working example https://codesandbox.io/s/2erqk

---

Multiple Hover-Dropdowns

If you are planning on having this behaviour on multiple dropdowns at once, I would go into the trouble of creating a component out of it - incorporating the b-dropdown into a new component.

<template>
  <div @mouseover="onOver" @mouseleave="onLeave">
    <b-dropdown id="dropdown-1" text="Dropdown Button" ref="dropdown" class="m-md-2">
      <slot></slot>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "b-dropdown-hover",
  methods: {
    onOver() {
      this.$refs.dropdown.visible = true;
    },
    onLeave() {
      this.$refs.dropdown.visible = false;
    }
  }
};
</script>

And then use it like this :

<template>
  <div>
    <b-dropdown-hover>
       <b-dropdown-item>First Action</b-dropdown-item>
       <b-dropdown-item>Second Action</b-dropdown-item>
       <b-dropdown-item>Third Action</b-dropdown-item>
    </b-dropdown-hover>
    <b-dropdown-hover>
       <b-dropdown-item>First Action</b-dropdown-item>
       <b-dropdown-item>Second Action</b-dropdown-item>
       <b-dropdown-item>Third Action</b-dropdown-item>
    </b-dropdown-hover>
  </div>
</template>
<script>

  import BDropdownHover from '@/components/BDropdownHover'

  export default {
    components : {
      BDropdownHover
    }
  }
</script>

But you also have to include all events and props that you need from b-dropdown into the new component. Here is a working example of that: https://codesandbox.io/s/romantic-elgamal-lol7h

Answer 2

I made another solution for multiple hover-dropdowns based on the answer of @pascal-lamers.

If you don't want to create different components for this task, instead you would like to solve it in the same nav element, then you need to define multiple refs and define the certain ref for your onOver and onLeave listeners.

<template>
    <div @mouseover="onOver('dropdown1')" @mouseleave="onLeave('dropdown1')">
        <b-dropdown id="dropdown-1" text="Dropdown Button" ref="dropdown1" class="m-md-2">
            <b-dropdown-item>First Action</b-dropdown-item>
            <b-dropdown-item>Second Action</b-dropdown-item>
            <b-dropdown-item>Third Action</b-dropdown-item>
        </b-dropdown>
    </div>
    <div @mouseover="onOver('dropdown2')" @mouseleave="onLeave('dropdown2')">
        <b-dropdown id="dropdown-2" text="Dropdown Button" ref="dropdown2" class="m-md-2">
            <b-dropdown-item>Fourth Action</b-dropdown-item>
            <b-dropdown-item>Fifth Action</b-dropdown-item>
            <b-dropdown-item>Sixth Action</b-dropdown-item>
        </b-dropdown>
    </div>
</template>

<script>
export default {
    methods: {
    onOver(element) {
        this.$refs[element].visible = true;
    },
    onLeave(element) {
        this.$refs[element].visible = false;
    }
    }
}
</script>