Hiding a dropdown in Vuejs by clicking outside (component)

Question

I'm creating a menu component on a Vuejs project. This menu has 2 dropdowns, I already created some methods and used Vue directives so when I click in 1 of them, the other hides and vice versa, I'd also like to know how to hide them by clicking outside.

I've tried 2 Vue libs but didn't work for me. Also, I'd like to do this manually if possible and not externally.

HTML:

<!-- 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-->

JS

data () {
    return {
      dropAreas: false,
      dropAdmin: false
    }
  },
  methods: {
    toggle1 () {
      if (this.dropAdmin === true) {
        this.dropAdmin = false
      }
    },
    toggle2 () {
      if (this.dropAreas === true) {
        this.dropAreas = false
      }
    }
  }

*This code is being called in another component, "Home", like this:

<template>
  <div>
    <menu></menu>
    <!-- [...] -->
  </div>
</template>

Any ideas on how to do it manually? Is it possible? Thank you.

Have you tried this one: https://github.com/vue-bulma/click-outside#readme — latovic, Jun 12 '19 at 14:04
If I got it right, this should help you: https://stackoverflow.com/questions/36170425/detect-click-outside-element — Serhiy, Jun 12 '19 at 14:05
It should but it didn't work for me... I think the problem is that I'm calling the menu on another component and since components are isolated in Vue, the overall examples don't work for me... — helleworld_, Jun 12 '19 at 15:12

score -1 · Answer 1 · answered Jun 12 '19 at 14:00

-1

It's a bit of a hack, but you can do it using tabindex HTML attribute and :focus CSS pseudo-class:

new Vue({

  el: '#app',
  template: `
    <div class="container">
      <div
      ref="menu"
      id="menu"
      tabindex="0"
      >Menu</div>
      <ul id="dropdown">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  `

});

#menu {
  display: inline-block;
  padding: 1em;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

#dropdown {
  display: none;
}

#menu:focus + #dropdown {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app"></div>

answered Jun 12 '19 at 14:00

yqlim

6,898
3
19
43

Thanks! Actually I'm doing the project with SCSS/SASS, would this work the same? – helleworld_ Jun 12 '19 at 15:11
@helleworld_ Yes it will work. Your SCSS/SASS will be converted into CSS too if you write them right. But I must mention that `tabindex` will interfere with browser's native tabbing sequence. So only use it if it is not breaking your UI/UX – yqlim Jun 12 '19 at 15:13

Hiding a dropdown in Vuejs by clicking outside (component)

1 Answers1