Vue js Cómo cerrar el menú desplegable de bootstrap cuando se hace clic fuera del menú
Dec 18 2020
Estoy intentando cerrar el menú desplegable cuando el usuario hace clic fuera del menú desplegable
header_component.vue
<div class="dropdown d-inline-block">
<a href="#" class="logo logo-dark">
<a href="javascript:void(0);" class="Logo-plus" @click="toggleMainMenu()">+</a>
<span class="logo-lg">
<img src="" alt="" height="25" id="topnav_heading_image">
</span>
</a>
<div class="dropdown-menu dropdown-menu-right" style="left: 0;right: auto;" v-bind:class="show_main_menu ? 'd-block' : ''">
..............
</div>
</div
lo que intenté hasta ahora es agregar addeventlistener al cuerpo al hacer clic y eliminarEventListener el evento al cerrar. El evento corporal no se activa. ¿Cómo agregar un evento al cuerpo al hacer clic?
methods:{
toggleMainMenu(){
this.show_main_menu = !this.show_main_menu;
this.show_sub_menu = false;
this.setBodyClass();
},
openSubMenu(menu_key){
let formData = new FormData();
formData.append("access_token", window.settings.access_token);
formData.append('menu_key',menu_key);
this.show_main_menu = false;
axios.post('/api/get_sub_menus', formData).then((response) => {
if(response.is_sub_menu == 0){
window.location.href = response.route;
}else{
this.sub_menus = _.chunk(_.toArray(response.data.sub_menu), 3);
this.show_sub_menu = true;
}
});
},
setBodyClass() {
var body = document.body;
body.classList.toggle('open');
if(this.show_main_menu){
body.addEventListener('click', e => {
this.toggleMainMenu;
});
} else {
body.removeEventListener('click', e => {
console.log('closed');
});
}
}
},
directives: {
"my-directive": {
bind: function(el, binding) {
alert('hello');
this.el.addEventListener('click', e => {
this.toggleMainMenu;
});
},
unbind: function(el) {
// Remove Event Listener
this.el.removeEventListener('click', e => {
console.log('closed');
});
}
}
Intenté con directivas también, no funciona
<body class="container-fluid p-0" v-my-directive="1">\
<body
Respuestas
BLPraveen Dec 18 2020 at 00:08
Debajo del código como resuelto mi problema
mounted(){
document.addEventListener('click', this.close);
},
methods:{
toggleMainMenu(){
this.show_main_menu = !this.show_main_menu;
this.show_sub_menu = false;
},
openSubMenu(menu_key){
let formData = new FormData();
formData.append("access_token", window.settings.access_token);
formData.append('menu_key',menu_key);
this.show_main_menu = false;
axios.post('/api/get_sub_menus', formData).then((response) => {
if(response.is_sub_menu == 0){
window.location.href = response.route;
}else{
this.sub_menus = _.chunk(_.toArray(response.data.sub_menu), 3);
this.show_sub_menu = true;
}
});
},
close (e) {
if (!this.$el.contains(e.target)) {
this.show_main_menu = false;
}
}
},
beforeDestroy () {
document.removeEventListener('click',this.close);
},