保留导航抽屉上的标题和图标

Question

我目前正在使用 Vue 和 vuetify 来构建导航抽屉容器。我有我正在寻找的东西......但是，当我点击抽屉图标时，我失去了标题和抽屉图标。即使抽屉打开，我也希望它们都留在那里。

有没有办法通过简单地使用 vuetify 来实现这一点？我显然可以在其中添加一个自定义标题，然后也可以添加一个图标。这是我的代码，这里有一些屏幕截图可以更好地帮助我实现目标。我查看了文档，还查看了导航抽屉的道具。希望有人有一个好的解决方法。

代码：

<template>
  <v-card height="100%" flat>
    <v-app-bar elevation="0" class="transparent">
      <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 prepend v-model="drawer" absolute temporary>
      <v-list nav dense>
        <v-list-item-group
          v-model="group"
          active-class="blue--text text--accent-4"
        >
          <v-list-item @click="setTitle(TitleList[0])" to="/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 @click="setTitle(TitleList[1])" to="/about">
            <v-list-item-icon>
              <v-icon>mdi-account</v-icon>
            </v-list-item-icon>
            <v-list-item-title>About</v-list-item-title>
          </v-list-item>

          <v-list-item @click="setTitle(TitleList[2])" to="/investments">
            <v-list-item-icon>
              <v-icon>mdi-currency-usd</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Investments</v-list-item-title>
          </v-list-item>

          <v-list-item @click="setTitle(TitleList[3])" to="/contact">
            <v-list-item-icon>
              <v-icon>mdi-email</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Contact</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <v-divider></v-divider>
    <router-view></router-view>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      group: null,
      Title: "Home",
      TitleList: ["Home", "About", "Investments", "Contact"],
    };
  },
  methods: {
    setTitle(value) {
      this.Title = value;
    },
  },
};
</script>

Answer 1

我认为如果不为v-navigation-drawer 传递absolute 属性，您的问题将得到解决。