Change v-navigation-drawer content on click

Question

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;
  },
}

Answer 1

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