@click.stop="drawer = !drawer" 在 vuetify 中不起作用

Question

所以，我正在尝试在 Vueitify 的导航抽屉中使用切换功能，当用户点击 nar 栏图标（汉堡菜单）时，抽屉应该打开，再次点击它应该关闭，但是这个不管用。我用这个@click.stop="drawer = !drawer" 它仍然只是打开而不是关闭我附上图片以供参考。

Answer 1

Here is the working codepen: https://codepen.io/chansv/full/abvWXaR

<div id="app">
  <v-app id="inspire">
      <v-navigation-drawer v-model="drawer" clipped style="padding-top: 65px;">

        <v-list
          dense
          nav
        >
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    <v-app-bar
      app
      color="indigo"
      dark
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>
    </v-card>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      drawer: null,
      items: [
        { title: 'Dashboard', icon: 'mdi-view-dashboard' },
        { title: 'Photos', icon: 'mdi-image' },
        { title: 'About', icon: 'mdi-help-box' },
      ],
      right: null,
    }
  },
})

@click.stop="drawer = !drawer" 在 vuetify 中不起作用

@click.stop="drawer = !drawer" does not work in vuetify

appbar

navigationbar

navigation-drawer

vuejs2

vuetify.js