版本不显示在导航菜单中 项目点击vuejs vuetify

Question

在我的导航菜单中，底部显示的是版本，但是当我点击menuItems时，除了点击profile菜单(如图所示)外，其他版本都在显示。我无法找到发生这种情况的原因。

 <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

我已经为版本添加了一个绝对位置，使其始终显示在底部。

下面是工作中的codepen。 https:/codepen.iochansvpenpojpWpB?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,
  }),
})