为什么Vuetify导航抽屉以大屏幕尺寸飞出？如何防止这种情况发生？

Question

我有以下带导航抽屉的Vuetify工具栏。这是我第一次尝试使用Vuetify构建Vue应用程序。在较小的屏幕尺寸下，它的行为符合预期。一旦屏幕宽度达到较大的断点（1264 px），抽屉就会飞出。使用Chrome版本72.0.3626.109（正式版）（64位）

我在文档中找不到对此预期行为的任何引用，更不用说如何防止它了。有一种简单的方法可以阻止这种行为吗？

我的 app.vue

<template>
  <v-app>
    <v-navigation-drawer v-model="sidebar" app>
    </v-navigation-drawer>
    <v-toolbar height=48 app>
      <v-toolbar-side-icon class="hidden-sm-and-up" @click="sidebar = !sidebar">
      </v-toolbar-side-icon>
      <v-toolbar-title>{{ appTitle }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn to="/" flat>Home</v-btn>
        <v-btn to="/about" flat>About</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
  </v-app>
</template>
<script>
  export default {
    data () {
      return {
        appTitle: 'VueTodo',
        sidebar: false
      }
    }
  }
</script>
<style>
</style>

Answer 1

有一个道具可以处理这种确切的行为disable-resize-watcher：

<v-navigation-drawer disable-resize-watcher v-model="sidebar" app>
</v-navigation-drawer>

https://vuetifyjs.com/en/components/navigation-drawers