0

I have 1 v-navigation-drawer and 2 buttons. The first button opens the 1st drawer, the 2nd button is supposed to change the drawer's content. What I would like is to be able to change the content of the drawer (once opened), as soon as I click on the button without having it closed. I don't want it to close when its content changes. I would just like its content to change without the "closing animation". The issue I'm facing at the moment is that the content changes (I can see the new text for half a second) but then it closes.

Here's what my code looks like :

<template>
  <div>
    <v-btn @click="drawerTest = !drawerTest">TESTING 1</v-btn><br><br>
    <v-btn @click="changeContent">TESTING 2</v-btn>
    <v-navigation-drawer 
      v-model="drawerTest"
      height="100vh"
      width="360px"
      absolute
      temporary
      hide-overlay
      right
    >
      <p>
        {{this.content1}}
      </p>
    </v-navigation-drawer>
  </div>
</template>

data() {
  let content1 = "This is the first test";
  let content2 = "HELLO";
},

methods: {
  changeContent() {
    this.content1 = this.content2;
  },
}
Quentin
  • 65
  • 9

1 Answers1

1

You should remove the temporary prop and instead add a stateless prop.

IVO GELOV
  • 13,496
  • 1
  • 17
  • 26
  • Because the stateless prop removes all automated state functionality (resize, mobile, route) which does not control the drawer automatically and allows manual control of the drawer state. – Neha Soni Feb 18 '23 at 04:23
  • Actually, I tried removing the temporary prop on the drawer and it still closes when I click on the "TESTING 2" button – Quentin Feb 22 '23 at 10:11
  • Try replacing the `temporary` prop with `permanent`. – IVO GELOV Feb 22 '23 at 10:22