导航菜单项中未显示版本单击 vuejs vuetify

Question

在我的导航菜单中，我在底部显示了版本，但是当我单击 menuItems 时显示的是版本，除非我单击配置文件菜单（如图所示）。我找不到发生这种情况的原因？

 <template>
     <v-navigation-drawer
       v-model="drawer"
       absolute
       temporary>

       <v-list nav dense >
            <v-list-item-group 

    >
      <v-list-item :to="{path:'/home'}">
        <v-list-item-icon>
          <v-icon>mdi-home</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Home</v-list-item-title>
      </v-list-item>

      <v-list-item :to="{path:'/profile'}">
        <v-list-item-icon>
          <v-icon>mdi-account</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Profile</v-list-item-title>
      </v-list-item>

      <v-list-item :to="{path:'/search'}">
        <v-list-item-icon>
          <v-icon>search</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Search</v-list-item-title>
      </v-list-item>

    </v-list-item-group>
  </v-list>

  <template v-slot:append >
    <div >
      <v-btn color="primary" block tile dark>Version 1.0.0</v-btn>
    </div>
  </template>

</v-navigation-drawer>

Answer 1

我为版本添加了绝对位置以始终显示在底部

Here is the working codepen: https://codepen.io/chansv/pen/pojpWpB?editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-card
            height="100%"
    >
      <v-app-bar
        color="deep-purple"
        dark
      >
        <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>
      </v-app-bar>

      <v-navigation-drawer
        v-model="drawer"
        absolute
        temporary
      >
        <v-list
          nav
          dense
        >
          <v-list-item-group
            v-model="group"
            active-class="deep-purple--text text--accent-4"
          >
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-home</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Home</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-account</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Account</v-list-item-title>
            </v-list-item>

          </v-list-item-group>
        </v-list>
        <div style="position: absolute; bottom: 0; width: 100%;"><v-btn color="primary" block tile dark>Version 1.0.0</v-btn></div>
      </v-navigation-drawer>
    </v-card>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    drawer: false,
  }),
})

导航菜单项中未显示版本单击 vuejs vuetify

Version is not showing in Navigation menu Item click vuejs vuetify

javascript

menuitem

navigation-drawer

vue.js

vuetify.js