How can I check if a user is clicking on a div called right-side-container and if they are remove the class of menu-opened.
toggleMenu() {
this.open = !this.open;
document.getElementsByTagName("html")[0].classList.toggle("menu-opened");
if (this.open) {
document.addEventListener("click", this.menuClickListener);
} else {
document.removeEventListener("click", this.menuClickListener);
}
},
menuClickListener($event) {
console.log($event);
},
},
};
// This is what I want to remove when the user is clicking the right-side-container
document.getElementsByTagName("html")[0].classList.remove("menu-opened");
I guess you want to open/close menu on click. So you can do this in Vue:
export default {
data() {
return {
show: true
}
},
methods: {
toggle() {
// my different actions...
this.show = !this.show
}
}
}<div v-if="show">
My menu
</div>
<div @click="toggleMenu">
Your button/container to show/hide menu
</div>Here you attach your variable "show" to display or not the element you want. And you attach your "click" function to the element you want to click to show/hide your element.