Estou usando o vuetify.js e tentando criar um componente que pode ser reutilizável no aplicativo. Embora esteja funcionando absolutamente bem, mas não tenho certeza se é o caminho correto.

Estou criando um componente da gaveta de navegação que tem as mesmas opções de menu o tempo todo, mas pode ser aberto a partir de elementos da interface do usuário.

Abaixo está o código.

// NavigationBar.vue

<template>
  <v-navigation-drawer
    temporary
    v-model="drawerFlag"
    light
    overflow
    fixed
  >
    <v-list>
      <v-list-tile>
        <v-list-tile-action @click.stop="toggleDrawer()">
          <v-btn icon>
            <v-icon>close</v-icon>
          </v-btn>
        </v-list-tile-action>
      </v-list-tile>
    </v-list>
    <v-list class="pt-0">
      <template v-for="item in items">
        <v-list-tile :key="item.title" :to="item.link">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-divider></v-divider>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
  export default {
    props: ['drawer'],
    data() {
      return {
        items: [
          { title: 'Home', icon: 'home', link: '/home'},
          { title: 'History', icon: 'history', link: '/history' },
          { title: 'Wallet', icon: 'account_balance_wallet', link: '/wallet' },
          { title: 'My Profile', icon: 'person', link: '/profile' },
          { title: 'Settings', icon: 'settings', link: '/settings' },
          { title: 'About', icon: 'error', link: '/about' },
          { title: 'Logout', icon: 'power_settings_new', link: '/logout' },
        ]
      };
    },
    computed: {
      drawerFlag: {
        get: function() {
          return this.drawer
        },
        set: function() {

        }
      }
    },
    methods: {
      toggleDrawer: function() {
        this.$emit('emitToggleDrawer');
      }
    }
  }
</script>

//Home.vue

<template>
  <div class="full-screen">
    <navigation-bar :drawer="drawer" v-on:emitToggleDrawer="toggleDrawer"></navigation-bar>
    <v-btn icon class="mt-3 fixed-position" @click.stop="drawer = !drawer">
      <v-icon>menu</v-icon>
    </v-btn>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data() {
      return {
        drawer: null
      };
    },

    computed: {
      user() {
        return this.$store.getters.user;
      }

    },

    methods: {
      toggleDrawer: function () {
        this.drawer = !this.drawer;
      }
    }
  };
</script>

No código acima ..

No componente pai, eu tenho o botão para abrir a gaveta de navegação e o estado da gaveta de navegação é mantido no componente pai chamado "gaveta". Então, estou passando a "gaveta" como um componente auxiliar do filho e um método para disparar um evento do componente filho para o componente pai chamado "emitToggleDrawer".

No componente filho, estou usando a gaveta de navegação vuetify.js, que usa v-model = "drawerFlag", em que drawerFlag é uma propriedade calculada. Quando tentei usar v-model = "drawer", ou seja, vincular ao suporte, estava recebendo um erro. Em seguida, podemos fechar a gaveta de navegação clicando em um elemento dentro da gaveta de navegação. Para conseguir isso, estou chamando um método do componente que mais tarde emite um evento que é escutado pelo componente pai.