@ click.stop = "ящик =! ящик" не работает в vuetify

Question

Итак, я пытаюсь использовать функцию переключения в окне навигации в Vueitify, когда d пользователь нажимает на иконку бара (меню гамбургера), когда ящик открывается, при повторном нажатии он должен закрыться, но это не так. за работой . Я использую этот @ click.stop = "ящик =! Ящик", но он просто открывается, а не закрывается. Я прикрепил изображение для справки.

Answer 1

Вот рабочий код ручки: 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,
    }
  },
})