Vuetify 覆盖覆盖抽屉

Question

我正在尝试为 Vue 应用程序创建一个导航栏，我正在使用 Vuetify，在大屏幕上有工具栏，在小屏幕上有打开导航抽屉的汉堡包图标。

它可以工作，但是抽屉前面有一个覆盖层，我无法更改页面。

这是代码：

<template>
  <div>
    <v-app-bar dark>
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="sidebar = !sidebar"></v-app-bar-nav-icon>
      <v-navigation-drawer v-model="sidebar" app>
        <v-list>
          <v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-toolbar-title>Jobify</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text v-for="item in menuItems" :key="item.title">
          <router-link :to="item.path">{{item.title}}</router-link>
        </v-btn>
      </v-toolbar-items>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      sidebar: false,
      menuItems: [
        { path: "/jobs", name: "jobs", title: "Jobs" },
        { path: "/companies", name: "companies", title: "Companies" },
        { path: "/jobs/new", name: "new-job", title: "Add job" }
      ]
    };
  }
};
</script>

<style>
</style> 

只有我使用的 Vuetify 组件在这里，实际上，v-app在 App 组件中。

Answer 1

尝试向组件添加hide-overlaypropv-navigation-drawer以隐藏覆盖层：

 <v-navigation-drawer v-model="sidebar" app hide-overlay >