[Vuejs]-Vuetify 2 v-navigation-drawer not showing again after dialog = false

by

0👍

You need to pass v-model to the v-navigation-drawer in order to show and hide it. Here is a minimum required example for you to go.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      drawer: false
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-navigation-drawer v-model="drawer" floating height="140px" class="w-100">
      <v-list dense rounded>
        <v-divider></v-divider>
        <v-list-item-group class="mt-3" color="primary" mandatory>
          <v-list-item>
            <v-list-item-action-text class="pe-4">idk</v-list-item-action-text>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <v-btn absolute @click="drawer = !drawer">Toggle</v-btn>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

0👍

I hope this answer is not to late.

You need to "reset" the dialog by using `v-if="yourDialogModel"’ on the outmost element inside the dialog.

So in my case it looks something like this:

 <v-dialog
    v-model="dialogHistory"
    fullscreen
    :scrim="false">
     <v-card v-if="dialogHistory">
        <!-- your nav-drawer, toolbar, content, etc here -->
     </v-card>
 </v-dialog>

Leave a comment