On click outside of some element in vue without packages

Question

I am wondering how can we hide all shown elements on click outside from those elements in vue:

<button @click="div1=true">Show div 1</button>
<div v-if="div1">DIV 1</div>

<button @click="div2=true">Show div 2</button>
<div v-if="div2">DIV 2</div>

How can I hide all divs besides div 1 if I click on div 1 or hide all divs on click on some random part of the page? How does vuetify handle it?

Just [detect the click outside with a directive](https://stackoverflow.com/a/42389266/5508690) and iterate through the open divs and set their display/hide property to false. — Steven B., Feb 25 '19 at 20:36
does not work for me even tho it works in fiddle I get `Cannot set property 'event' of undefined` — Learner, Feb 25 '19 at 20:43
Did you look at the specific answer I linked? not the selected answer of the question as that was for vue 1.x. — Steven B., Feb 25 '19 at 20:46

score 1 · Answer 1 · answered Mar 16 '20 at 22:29

Vue way is to use this.$el (DOM element of current component), you can change this.$el and use any other HTMLElement

<div class="modal" @click="handleClick">
  <div class="modal-dialog">
    <div class="modal-content">
    ...
    </div>
</div>

And method should look like this

handleClick(e: Event): void {
  if (e.target instanceof HTMLElement && !this.$el.contains(e.target)) {
    this.$emit("hide"); //fires only on click outside
  }
}

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

It's easy to detect click outside of the element if you know how event bubbling works in DOM.
Hiding other divs works perfectly well when you put state of every div into the components's state.

Here is an example: https://codesandbox.io/s/0480m38mww?fontsize=14&module=%2Fsrc%2FApp.vue

Learn more about Event Bubbling here - https://javascript.info/bubbling-and-capturing

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 25 '19 at 23:41

Max Liashuk

1,043
7
18

score 0 · Answer 3 · answered Apr 12 '21 at 22:52

I used this process so Home component would know that outside my Nav component has been clicked. It helps that I have my nav inside my Home Component.

My Home component template:

<div>
 <nav-bar ref="nav"></nav-bar>
  <div @click="useHideNavMethod()">

So I use ref="nav" to use methods from the Nav in my Home component. This means I can use the hideNav() method (which resides in Nav). I have purposely put the nav outside of this div with the click method, so anywhere clicked other than Nav would initiate the useHideNavMethod() function.

In my Nav component template I have:

<nav id="nav">

which is referenced when I use ref="nav".

So inside my hideNav() I have this.styleNavLi.display = 'none'; so it would hide the nav bar.

So all I need to do to use that method in Home is to use:

useHideNavMethod() {
 this.$refs.nav.hideNav();
}

GMKHussain · Answer 4 · 2022-01-19T10:03:37.450

Use div1 = !div1 for toggle view, Or use div1 = true for one time only.

<template>
  <div>
    {{ div1 }}
    <button @click="div1 = !div1">Show div 1</button>
    <div v-if="div1">DIV 1</div>

    {{ div2 }}
    <button @click="div2 = !div2">Show div 2</button>
    <div v-if="div2">DIV 2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      div1: true, // set default value as you want
      div2: false,
    };
  },
};
</script>

On click outside of some element in vue without packages

4 Answers4

Here is an example: https://codesandbox.io/s/0480m38mww?fontsize=14&module=%2Fsrc%2FApp.vue