为什么我的 V-navigation-drawer 不在小屏幕上关闭并在大屏幕上打开？

Question

我正在制作一个包含导航抽屉的 Web 应用程序，其目的是导航抽屉默认打开，如果屏幕尺寸变小它应该关闭，如果它变回大它应该重新打开的屏幕大小，但目前无法正常工作。

我尝试过使用断点 ($vuetify.breakpoint.lgAndUp) 和 v-model，但它似乎不起作用。

 <template>
  <!--Start of template layaout-->
  <v-layout wrap row>
    <!--End of template layout-->
    <v-app-bar color="grey lighten-2" light height="80" app clipped-left>
      <v-app-bar-nav-icon x-large @click.stop="draw = !draw"></v-app-bar-nav-icon>
      <v-img
        src="http://logo-load.com/uploads/posts/2016-02/1455472802_logo.png"
        lazy-src="http://logo-load.com/uploads/posts/2016-02/1455472802_logo.png"
        aspect-ratio="1"
        max-width="60"
        max-height="60"
        class="appTitle"
        @click="pushToken('Home')"
      ></v-img>
      <v-toolbar-title class="text-uppercase">
        <span @click="pushToken('Home')"> Tools</span>
      </v-toolbar-title>
 <!--Spacer to  keep buttons to the right side-->
      <v-spacer></v-spacer>
      <!--Apps menu button-->
      <!--Apps menu start-->
      <v-menu offset-y max-width="200" min-width="200">
        <template v-slot:activator="{ on: menu }">
          <v-tooltip bottom>
            <template v-slot:activator="{ on: tooltip }">
              <v-btn text v-on="{ ...tooltip, ...menu }">
                <v-icon large>apps</v-icon>
              </v-btn>
            </template>
            <span>Applications</span>
          </v-tooltip>
        </template>
        <v-list>
          <v-list-item v-for="(app, index) in apps" :key="index" class="appDecor">
            <v-btn :color="app.color" dark>{{app.title}}</v-btn>
          </v-list-item>
        </v-list>
      </v-menu>
      <!--Apps menu end-->

      <!--Menu template for list menu-->
    </v-app-bar>

    <!--Log out Dialog-->
    <v-dialog v-model="dialog" max-width="350px" transition="dialog-transition">
      <v-card>
        <v-card-title>Are you sure you want to exit?</v-card-title>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="info" @click="logOut()">yes</v-btn>
          <v-spacer></v-spacer>
          <v-btn color="info" @click="dialog = false">no</v-btn>
          <v-spacer></v-spacer>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!--Dialog-->

    <!--Nav drawer start-->
    <v-navigation-drawer
      v-model="draw"
      color="grey lighten-2"
      absolute
      :clipped-left="$vuetify.breakpoint.lgAndUp"
    >
      <v-layout row wrap>
        <v-container grid-list-xs>
          <v-list dense nav>
            <v-list-item v-for="item in items" :key="item.id" link>
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <span @click="pushToken(item.link)">{{ item.param }}</span>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-container>
      </v-layout>
      <template v-slot:append>
        <v-btn @click="dialog = true" block class="my-5">
          <v-icon left>exit_to_app</v-icon>Log out
        </v-btn>
      </template>
    </v-navigation-drawer>
    <!--Nav drawer end-->
  </v-layout>
</template>

我希望导航抽屉默认打开，关闭小屏幕并重新打开如果将屏幕尺寸更改为更大，但实际结果是，抽屉默认打开并在屏幕尺寸发生变化时保持打开状态（并且在小屏幕上也会显示屏幕覆盖），如果我手动关闭它，它不会在屏幕尺寸之间切换时自行打开。

Answer 1

如果你想发现错误，你应该给出控制导航抽屉变化的相关代码。 简单的解决方案：v-show 并更改导航抽屉的显示 例如：
`

<template>
  <v-app>
    <v-content>
      <div v-show='is_hide_text' ref='text'>
        <p>some text</p>
      </div>
      <button @click='hide_content'>hide_content</button>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  data: () => ({
    //
  }),
  computed:{
    is_hide_text(){
      return this.$vuetify.breakpoint.mdAndUp
    }
  },
  methods:{
    hide_text(){
      this.$refs['text'].style.display = 'none'
    }
  }
};
</script>

`