Vue js Cara menutup menu dropdown bootstrap saat diklik di luar menu
Saya mencoba menutup menu tarik-turun saat pengguna mengeklik di luar menu tarik-turun
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
apa yang saya coba sejauh ini adalah menambahkan addeventlistener ke tubuh di klik dan removeEventListener acara di tutup. Peristiwa Tubuh tidak dipicu. Bagaimana cara menambahkan event ke body onclick?
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');
});
}
}
Saya mencoba dengan arahan juga tidak berhasil
<body class="container-fluid p-0" v-my-directive="1">\
<body
Jawaban
BLPraveen
Di bawah kode sebagai memecahkan masalah saya
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);
},
Selalu Menjadi Ancaman: Mengapa Orang Berkulit Coklat dan Hitam Tidak Bisa Nyaman di Amerika Serikat