[Vuejs]-Vue 3 click outside directive prevent to close a specific content (sidebar) when click inside

by

0👍

I have added and id to the sidebar filter component …. and now when click inside (anywhere the sidebar) it will not close

export default {    
  beforeMount(el, binding, vnode) {
    el.clickOutsideEvent = function(event) {
      let sidebarFilter = document.getElementById('sidebar-filter-component')
      let clickedInsideSidebar = sidebarFilter && (event.target === sidebarFilter || sidebarFilter.contains(event.target))      
        
      if (!(el === event.target || el.contains(event.target) || clickedInsideSidebar)) {
        binding.value(event, el);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.body.removeEventListener('click', el.clickOutsideEvent);
  }
};

Leave a comment