I am currently working on a project with a v-navigation-drawer and two buttons. The first button is designed to open the drawer, while the second one should change the content of the drawer without closing it. I want the content to update instantly without any closing animation.
The problem I am encountering is that when I click the button to change the content, the new text is displayed for a brief moment before the drawer closes automatically.
Below is an example of 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;
},
}