hiding a dropdown menu in vuejs when clicking outside of it

Question

hiding a dropdown menu in vuejs when clicking outside of it

Utilizing dropdown menu components in vuejs to create a standard dropdown menu. The code for the dropdown component is as follows:

<template>
    <span class="dropdown" :class="{shown: state}">
        <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
            <div class="dropdown-menu" v-show="state">
                <ul class="list-unstyled">
                    <slot></slot>
                </ul>
            </div>
        </transition>
    </span>
</template>

<script>
export default {
    name: 'dropdown',
    data () {
        return {
            state: false
        }
    },
    methods: {
        toggleDropdown (e) {
            this.state = !this.state;
        }
    }
}
</script>

Now I am including the dropdown component in my VUE app at different places using the following code in the template

<dropdown>
    <li>
         Action
    </li>
</dropdown>

Everything seems to be working fine, but I desire to have only one dropdown active at any given time.

After some research, I discovered that there are plugins like https://github.com/davidnotplay/vue-my-dropdown, however, I prefer not to use them. I have also investigated how the earlier example functions, but I aim to implement this dropdown feature so that my dropdown component can handle all event interactions related to the dropdown. Can you assist me with achieving this?

javascript drop-down-menu vue.js vuejs2 vue-component

Answer 1

Answer №1

Although this question is from a while back, I believe the most effective way to achieve this without relying on external plugins is by incorporating a click listener in the mounted lifecycle hook (and removing it in the beforeDestroy hook) to filter out clicks on your component and ensure it only hides when clicked outside.

<template>
    <span class="dropdown" :class="{shown: state}">
      <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
            <div class="dropdown-menu" v-show="state">
                <ul class="list-unstyled">
                    <slot></slot>
                </ul>
            </div>
        <transition/>
    </span>
</template>

<script>
export default {
  name: 'dropdown',
  data () {
    return {
      state: false
    }
  },
  methods: {
    toggleDropdown (e) {
      this.state = !this.state
    },
    close (e) {
      if (!this.$el.contains(e.target)) {
        this.state = false
      }
    }
  },
  mounted () {
    document.addEventListener('click', this.close)
  },
  beforeDestroy () {
    document.removeEventListener('click',this.close)
  }
}
</script>

Answer 2

Although this question is from a while back, I believe the most effective way to achieve this without relying on external plugins is by incorporating a click listener in the mounted lifecycle hook (and removing it in the beforeDestroy hook) to filter out clicks on your component and ensure it only hides when clicked outside.

<template>
    <span class="dropdown" :class="{shown: state}">
      <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
            <div class="dropdown-menu" v-show="state">
                <ul class="list-unstyled">
                    <slot></slot>
                </ul>
            </div>
        <transition/>
    </span>
</template>

<script>
export default {
  name: 'dropdown',
  data () {
    return {
      state: false
    }
  },
  methods: {
    toggleDropdown (e) {
      this.state = !this.state
    },
    close (e) {
      if (!this.$el.contains(e.target)) {
        this.state = false
      }
    }
  },
  mounted () {
    document.addEventListener('click', this.close)
  },
  beforeDestroy () {
    document.removeEventListener('click',this.close)
  }
}
</script>

Answer 3

Answer №2

Implementing the functionality in Vue 3

Take note that using @click.stop on both the dropdown trigger and content blocks prevents the document event from triggering the close function.

<template>
  <div class="dropdown" :class="{'is-active': dropdown.active.value}">
    <div class="dropdown-trigger">
      <button class="button" @click.stop="dropdown.active.value = !dropdown.active.value">
        Toggle
      </button>
    </div>
    <div class="dropdown-menu" role="filter">
      <div class="dropdown-content" @click.stop>
        <!-- dropdown items -->
      </div>
    </div>
  </div>
</template>

<script>

import { defineComponent, ref, onMounted, onBeforeUnmount } from "vue";

export default defineComponent({
  name: "Dropdown",
  setup(){
    const dropdown = {
      active: ref(false),
      close: () => {
        dropdown.active.value = false
      }
    }

    onBeforeUnmount(() => {
      document.removeEventListener('click', dropdown.close)
    })

    onMounted(() => {
      document.addEventListener('click', dropdown.close)
    })

    return {
      dropdown
    }
  }
})

</script>

This demonstration utilizes the bulma framework, but it is adaptable to any other framework as well.

Answer 4

Implementing the functionality in Vue 3

Take note that using @click.stop on both the dropdown trigger and content blocks prevents the document event from triggering the close function.

<template>
  <div class="dropdown" :class="{'is-active': dropdown.active.value}">
    <div class="dropdown-trigger">
      <button class="button" @click.stop="dropdown.active.value = !dropdown.active.value">
        Toggle
      </button>
    </div>
    <div class="dropdown-menu" role="filter">
      <div class="dropdown-content" @click.stop>
        <!-- dropdown items -->
      </div>
    </div>
  </div>
</template>

<script>

import { defineComponent, ref, onMounted, onBeforeUnmount } from "vue";

export default defineComponent({
  name: "Dropdown",
  setup(){
    const dropdown = {
      active: ref(false),
      close: () => {
        dropdown.active.value = false
      }
    }

    onBeforeUnmount(() => {
      document.removeEventListener('click', dropdown.close)
    })

    onMounted(() => {
      document.addEventListener('click', dropdown.close)
    })

    return {
      dropdown
    }
  }
})

</script>

This demonstration utilizes the bulma framework, but it is adaptable to any other framework as well.

Answer 5

Answer №3

Check out a helpful tool called vue-clickaway. You can find more information about it here.

At times, it's necessary to detect clicks outside of an element (for example, to close a modal window or hide a dropdown select). No native event exists for this purpose, and Vue.js doesn't provide a solution either. This is where the vue-clickaway plugin comes in handy. Make sure to view the demo first before delving deeper.

Answer 6

Check out a helpful tool called vue-clickaway. You can find more information about it here.

At times, it's necessary to detect clicks outside of an element (for example, to close a modal window or hide a dropdown select). No native event exists for this purpose, and Vue.js doesn't provide a solution either. This is where the vue-clickaway plugin comes in handy. Make sure to view the demo first before delving deeper.

Answer 7

Answer №4

If you want to hide a dropdown whenever a toggle link loses focus, you can utilize the `blur` event along with a method like this:

hideDropdown() {
    setTimeout(() => {
        this.isVisible = false;
    }, 200);
}

Simply add the `blur` event to your link element:

<a href="#" @click.prevent="toggleDropdown" @blur="hideDropdown">Toggle Menu</a>

This way, the dropdown will automatically hide when the toggle link is no longer in focus. The use of `setTimeout` is important here because click events in Javascript happen after blur events, causing issues with clickable elements inside the dropdown. By introducing a slight delay, you can avoid these problems and ensure smooth functionality.

Answer 8

If you want to hide a dropdown whenever a toggle link loses focus, you can utilize the `blur` event along with a method like this:

hideDropdown() {
    setTimeout(() => {
        this.isVisible = false;
    }, 200);
}

Simply add the `blur` event to your link element:

<a href="#" @click.prevent="toggleDropdown" @blur="hideDropdown">Toggle Menu</a>

This way, the dropdown will automatically hide when the toggle link is no longer in focus. The use of `setTimeout` is important here because click events in Javascript happen after blur events, causing issues with clickable elements inside the dropdown. By introducing a slight delay, you can avoid these problems and ensure smooth functionality.

hiding a dropdown menu in vuejs when clicking outside of it

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JavaScript getting overshadowed by other JavaScript libraries

What is the process for setting up FastAPI to handle server-side rendering for Vue 3?

Retrieve all documents with a matching objectId field in MongoDB

Retrieving component attributes using jQuery or alternate event handlers

Elasticsearch query fails to execute when encountering a special character not properly escaped

Failing to retain hyperlinks with ajax

Unable to successfully upload a .docx file within OnlyOffice utilizing JavaScript

I encountered an issue with passing arguments in the invoke function I redesigned

Vue.js component unable to validate HTML input patterns

Issue with parsing JSONP using jQuery's AJAX request

Exploring the money library in typescript after successfully installing it on my local machine

"Revolutionize real-time data updates with Node.js, Redis, and Socket

Looking to bring in a non-ES6 library into VueJS without using export statements

PHP MySQL Table with a Date Range Filter

Checking for valid zip code using a regular expression in JavaScript

The lightbox is triggered by clicking on a different div to display its content

What could be causing the issue of being unable to connect to the NodeJS express server from any network?

What could be causing the issue with my css `content:` not functioning across different browsers, and how can I enhance cross-browser compatibility in all cases

Ways to determine if JavaScript array objects overlap

Avoid the occurrence of the parent's event on the child node