在Vuetify 1.5中，如何在v-toolbar中獲得美觀的v-menu？

Question

這是我的工具欄，第一個按鈕/菜單有問題。 我希望它在突出顯示時具有與其他按鈕突出顯示時相同的外觀。 我已經嘗試過在v-btn上使用py-3和py-2類，但是隨后它被擠​​壓或無法填充整個工具欄區域。

 <v-toolbar dark dense app color="blue-grey darken-2">
  <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
  <v-toolbar-title class="text-uppercase">
    <router-link :to="{ name: 'home' }" class="brand-logo white--text">
      <span>Byte</span>
      <span class="font-weight-light">[Gym]</span>
    </router-link>
  </v-toolbar-title>
  <v-spacer></v-spacer>
  <v-toolbar-items class="hidden-sm-and-down">
    <v-menu v-if="user" offset-y transition="slide-y-transition" open-on-hover>
      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on">
          <v-icon>expand_more</v-icon><v-btn flat to="/training">Training</v-btn>
        </v-btn>
      </template>
      <v-list>
        <v-list-tile v-for="item in traininglinks" :key="item.text" router :to="item.route">
          <v-list-tile-title>{{ item.text }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
    <v-btn flat to="/nutrition">Nutrition</v-btn>
    <v-btn flat to="/about">About</v-btn>
  </v-toolbar-items>
  <v-spacer></v-spacer>
  <v-btn v-if="user" flat>{{user.email}}</v-btn>
  <v-btn v-if="!user" icon to="/login">
    <v-icon>account_circle</v-icon>
  </v-btn>
  <v-btn v-if="user" icon @click="logout">
    <v-icon right>exit_to_app</v-icon>
  </v-btn>
  <v-btn icon>
    <v-icon>search</v-icon>
  </v-btn>
  <v-btn icon class="hidden-sm-and-up">
    <v-icon>more_vert</v-icon>
  </v-btn>
</v-toolbar>

我希望它在激活時看起來像其他按鈕，但是現在它周圍只有一個小方框。 我覺得這應該開箱即用嗎？ 在任何地方都找不到答案。

Answer 1

所以這里的問題是，您要將按鈕放在按鈕內部。 如果您刪除了Training周圍的v-btn ，則它會按照預期的方式工作。

      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on">
          <v-icon>expand_more</v-icon>Training
        </v-btn>
      </template>

此處可工作的codepen： https ://codepen.io/CodingDeer/pen/rNBjLOJ ? editors = 1010