How to attach a Vuetify v-menu to its parent element in a scrollable list?

Question

In my project, I have a scrollable list of items, and each item has a menu that is opened when its activator button is hovered.

By default, v-menu elements are attached to the v-app element, which serves as a mounting point for many Vuetify elements. When I use this default behavior, the generated HTML contains many detached div elements for the popup menu, one per item in the list, in the generated v-app div:

<div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div>

This is impacting the reading of the rendered DOM, and the result is a bit messy especially when debugging.

Also, once the menu is opened, and the list is scrolled, the menu remains at a fixed position and therefore gets visually detached from its activator button.

How could I attach the menu to each item of the list in order to have a more readable rendered DOM (see below)?

<my-list>
  <my-item>
    <div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div>
  </my-item>
</my-list>

And how can I have the v-menu stick to its activator button when the list is scrolled?

Answer 1

Check out the documentation under the following link and search for "attach":

https://vuetifyjs.com/en/components/menus

"Attach": Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

So when you have a menu like e.g. this:

<v-menu>

  <v-btn slot="activator">
  Click
  </v-btn>

  <v-card>
  Content
  </v-card>

</v-menu>

You can attach it to an element, let's say the button itself, like so:

<v-menu attach="#fooAnchor">

  <v-btn slot="activator" id="fooAnchor">
    Click
  </v-btn>

  <v-card>
    Content
  </v-card>

</v-menu>

And of course you can place id="fooAnchor" wherever you want.