Vuetify のメニュー(v-menu)を DOM 内のスクロールに追随させる方法

はじめに

Vuetify の v-list 内で v-menu を表示したときに、スクロールに応じてメニューが追随しない問題の対応方法を記載します。
実装内容は大したことはないですが、思いのほか調査に時間がかかりましたので、誰かの参考になればと投稿します。

実現方法

v-menu の attach オプションを指定するだけでした。

attach の説明文は以下の通り。

Specifies which DOM element that this component should detach to.String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.

結局は v-menu の DOM をどこに格納するか、ってだけの話ですね。
今まで jQuery で散々こういった対応をしてきたはずなのに、流行りのフレームワークを利用した開発だと最終的に出来上がる DOM をイメージする機会が減っているようで、盲点でした。

最終的な Vue template の抜粋配下通りです。
ポイントは v-list-item に適当なクラスを定義して v-menu の attach を指定するところです。
Vuetify を使ったの開発で css selector を書いたのは初めてかも？

<template>
  <v-layout>
    <v-navigation-drawer>
      <v-list>
        <v-list-item-group>
          <template v-for="item in items">
            <v-list-item :class="`list-item-${item}`">
              <v-list-item-content>
                <v-list-item-title>{{ item }}</v-list-item-title>
              </v-list-item-content>
              <v-menu
                :attach="`.list-item-${item}`"
                left
                offset-y
              >
              </v-menu>
            </v-list-item>
          </template>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
  </v-layout>
</template>

ちょっとしたポイント

メニューを追随させるだけなら attach の指定だけでいいですが、
v-navigation-drawer と併用した場合、ドロワーからはみ出た DOM は表示されないため、ドロワー内に収める必要があります。
そのため、ここでは v-menu に left を指定しています。

おわりに

記載内容は、https://markdown.aprifield.com (Markdown でメモを取って Google Drive に保存するサービス) を開発中に調査した内容です。