I've managed to emit the toggle event in the console, as shown below, but I'm unsure of what to do next. How can I make my event display a division? Currently, I am only able to show it using v-if="toggle=true", however, it doesn't disappear when I create that div.
<template>
<div
class="drawer-toggle"
role="button"
@click="$emit('toggle')">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</template>
<style scoped>
.drawer-toggle {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 50%;
width: 35px;
cursor: pointer;
}
@media (min-width: 768px) {
.drawer-toggle {
display: none;
}
}
.drawer-toggle .bar {
width: 90%;
height: 2px;
background-color: white;
}
</style>
Below is a screenshot of the console: