在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