Dynamically showcase dropdown menus within a single component

Question

Dynamically showcase dropdown menus within a single component

I am looking to implement multiple dropdowns in a single component, using one variable to control their display and also have them close when clicking away from the dropdown. Here is my code snippet:

<div class="dropdown">
  <button @click.prevent="isOpen = !isOpen"></button>
    <div v-show="isOpen">Content</div>
</div>
// Second dropdown within the same component
<div class="dropdown">
  <button @click.prevent="isOpen = !isOpen"></button>
    <div v-show="isOpen">Content</div>
</div>

data() {
  return {
    isOpen: false
  }
},
watch: {
  isOpen(isOpen) {
    if(isOpen) {
      document.addEventListener('click', this.closeIfClickedOutside)
    }
  }
},
methods: {
  closeIfClickedOutside(event){
    if(! event.target.closest('.dropdown')){
      this.isOpen = false;
    }
  }
}

However, I am encountering an issue where clicking on one dropdown menu displays both of them. As a newcomer to Vue, I am struggling to find a solution to this problem.

javascript vue.js

Answer 1

Answer №1

To simplify the process and ensure smooth functionality, it is recommended to use a variable that can identify which dropdown is currently open, rather than using a Boolean value. One effective approach is to store an index (such as a number) in the variable and then conditionally render the selected dropdown based on this index:

Begin by declaring a data property to hold the selected index:

export default {
  data() {
    return {
      selectedIndex: null
    }
  }
}

Next, update the closeIfClickedOutside() method to reset the selected index, effectively closing any open dropdowns:
```
export default {
  methods: {
    closeIfClickedOutside() {
      this.selectedIndex = null
    }
  }
}
```

In the template, adjust the click event handlers to set the selected index accordingly:

<button @click.stop="selectedIndex = 1">Open 1</button>
<button @click.stop="selectedIndex = 2">Open 2</button>

Additionally, update the conditions for v-show to display content based on the index:

<div v-show="selectedIndex === 1">Content 1</div>
<div v-show="selectedIndex === 2">Content 2</div>

It's also advisable not to rely on a watcher to handle adding a click event listener to the document, as we need to detect outside clicks when the component is active. A better approach would be to add the event listener in the mounted hook and remove it in the beforeDestroy hook:

export default {
  mounted() {
    document.addEventListener('click', this.closeIfClickedOutside)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.closeIfClickedOutside)
  },
}

Check out the demo here.

Answer 2

To simplify the process and ensure smooth functionality, it is recommended to use a variable that can identify which dropdown is currently open, rather than using a Boolean value. One effective approach is to store an index (such as a number) in the variable and then conditionally render the selected dropdown based on this index:

Begin by declaring a data property to hold the selected index:

export default {
  data() {
    return {
      selectedIndex: null
    }
  }
}

Next, update the closeIfClickedOutside() method to reset the selected index, effectively closing any open dropdowns:
```
export default {
  methods: {
    closeIfClickedOutside() {
      this.selectedIndex = null
    }
  }
}
```

In the template, adjust the click event handlers to set the selected index accordingly:

<button @click.stop="selectedIndex = 1">Open 1</button>
<button @click.stop="selectedIndex = 2">Open 2</button>

Additionally, update the conditions for v-show to display content based on the index:

<div v-show="selectedIndex === 1">Content 1</div>
<div v-show="selectedIndex === 2">Content 2</div>

It's also advisable not to rely on a watcher to handle adding a click event listener to the document, as we need to detect outside clicks when the component is active. A better approach would be to add the event listener in the mounted hook and remove it in the beforeDestroy hook:

export default {
  mounted() {
    document.addEventListener('click', this.closeIfClickedOutside)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.closeIfClickedOutside)
  },
}

Check out the demo here.

Answer 3

Answer №2

Creating an array and iterating through it simplifies the process.

<template>     
<div id="app">
        <div class="dropdown" v-for="(drop, index) in dropData" :key="index">
      <button @click="openDropdown(index);">{{ drop.title }}</button>
        <div v-show="isOpen === index">{{ drop.content }}</div>
    </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isOpen: null,
          dropData: [
            {
              title: "Hey",
              content: "Hey it's content 1"
            },
              {
              title: "Hey 2",
              content: "Hey it's content 2"
            },
              {
              title: "Hey 3",
              content: "Hey it's content 3"
            },
          ]
        };
      },
     
    methods: {
        openDropdown(idx){
         if (this.isOpen === idx) {
              this.isOpen = null;
            } else {
            this.isOpen = idx;
            }
    
        }
    
    }
    };
    </script>

Answer 4

Creating an array and iterating through it simplifies the process.

<template>     
<div id="app">
        <div class="dropdown" v-for="(drop, index) in dropData" :key="index">
      <button @click="openDropdown(index);">{{ drop.title }}</button>
        <div v-show="isOpen === index">{{ drop.content }}</div>
    </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isOpen: null,
          dropData: [
            {
              title: "Hey",
              content: "Hey it's content 1"
            },
              {
              title: "Hey 2",
              content: "Hey it's content 2"
            },
              {
              title: "Hey 3",
              content: "Hey it's content 3"
            },
          ]
        };
      },
     
    methods: {
        openDropdown(idx){
         if (this.isOpen === idx) {
              this.isOpen = null;
            } else {
            this.isOpen = idx;
            }
    
        }
    
    }
    };
    </script>

Dynamically showcase dropdown menus within a single component

Answer №1

Answer №2

Similar questions

Exploring the capabilities of nested WebGL render targets in the three.js library

Display a list of items in Angular using ng-repeat, and allow the full description to appear in full width

Ways to divide elements of an array into pairs

Having difficulty with Bootstrap buttons functioning correctly within a React environment

Hold off on continuing the script until the AJAX response has been received

AJAX: Send a value, perform a query based on this value, and retrieve a JSON array

Displaying JSON data in HTML proves to be a challenge

Creating a function in React to be passed as a prop

Tips for altering the appearance of a button when moving to a related page

Unable to access a nested JSON object that has a repeated name

Trying to add a single value to a specific index in a JavaScript array, but it is mistakenly assigning multiple values at once

Type-safe Immutable.js Records with TypeScript

What could be the reason behind the unexpected outcome of process.argv[3] when its value is set to '*'?

Issue in Jquery: Unable to load the corresponding pages when toggling the checkbox on and off

Utilizing the Kraken.com API to create a message signature with AngularJS

Leveraging the power of Discord.js to verify the image URL within an embed

Get rid of empty spaces in gridstack js

Difficulty understanding D3 Angular: color fill remains unchanged

Using JavaScript to implement CSS3 with multiple background images

Bug in Click Behavior of HTML5 Canvas on Webkit Browser Versions Below 535 for Android Native and iOS5 Safari