I am currently working on a Vuejs project where I am creating a menu component. This menu consists of 2 dropdowns, and I have already implemented some methods and used Vue directives to ensure that when one dropdown is clicked, the other hides and vice versa. However, I am also interested in figuring out a way to hide the dropdowns by clicking outside of them.
I have tried using 2 Vue libraries for this purpose, but unfortunately, they did not work as expected. Ideally, I would like to accomplish this manually within the project without relying on external resources.
Here is the HTML code for the menu:
<!-- menu -->
<div>
<ul>
<li><span>Home</span></li>
<li v-on:click="toggle1(), dropAreas =! dropAreas">
<span>Areas</span>
</li>
<li v-on:click="toggle2(), dropAdmin =! dropAdmin">
<span>Administration</span>
</li>
</ul>
</div>
<!-- /menu -->
<!-- dropdowns-->
<div v-if="dropAreas">
<ul>
<li>
<span>Kitchen</span>
</li>
<li>
<span>Baths</span>
</li>
</ul>
</div>
<div v-if="dropAdmin">
<ul>
<li>
<span>Profile</span>
</li>
<li>
<span>Services</span>
</li>
</ul>
</div>
<!-- /dropdowns-->
This is the JavaScript code related to the functionality:
data () {
return {
dropAreas: false,
dropAdmin: false
}
},
methods: {
toggle1 () {
if (this.dropAdmin === true) {
this.dropAdmin = false
}
},
toggle2 () {
if (this.dropAreas === true) {
this.dropAreas = false
}
}
}
*Please note that this code is being called in another component named "Home" like so:
<template>
<div>
<menu></menu>
<!-- [...] -->
</div>
</template>
If you have any manual solutions or ideas on how to achieve this functionality, I would greatly appreciate your input. Thank you.