Close menu when user clicks on div

Question

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");

Answer 1

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.