What is the best way to fix multiple dropdown menus opening simultaneously in Vue.js?

Question

What is the best way to fix multiple dropdown menus opening simultaneously in Vue.js?

I am working on an application that generates todo lists for tasks. These lists can be edited and deleted. I am trying to implement a dropdown menu in each list to provide options for updating or deleting the list individually. However, when I click on the dropdown icon, it expands all the dropdown menus simultaneously. Can someone assist me in resolving this issue? Below is my code in Vue.JS along with a screenshot of the dashboard displaying the lists.

DashboardView.vue:

<template>
  <div class="dashboard">
    <Navbar class="navbar__dash" />
    <h1 class="dashboard__welcome">Welcome {{ name }}</h1>
    <div class="listview">
      <div class="no__lists" v-if="len_list === 0">
        <h2 class="no_lists">There are No lists here tap to add</h2>
      </div>
      <div class="has__lists" v-else>
        <div class="all__lists" v-for="(item, index) in items" :key="index">
          <div class="list">
            <div class="title">
              <div class="title__options">
                <h1 class="list_name">{{ item.list_name }}</h1>
                <div class="dropdown">
                  <button @click="toggleMenu">
                    <fa class="dropdown_icon" icon="fa-solid fa-arrow-down" />
                  </button>
                  <div v-if="showMenu" class="menu">
                    <div
                      class="menu-item"
                      v-for="(item, index) in links_list"
                      :key="index"
                      @click="itemClicked"
                    >
                      {{ item.title }}
                    </div>
                  </div>
                </div>
                <!-- V-menu -->
                <!--menu ends-->
              </div>
            </div>
            <div class="body">
              <div class="no_tasks" v-if="item.no_of_tasks === 0">
                <h3>There are no tasks added yet</h3>
              </div>
              <div class="has_tasks" v-else>
                <h4>Here are your tasks</h4>
              </div>
            </div>
            <div class="footer">
              Number of Completed tasks: {{ item.no_completed }}/{{
                item.no_of_tasks
              }}
            </div>
          </div>
        </div>
      </div>
      <router-link :to="`/createList/${id}`">
        <fa class="plus__icon" icon="fa-solid fa-plus" />
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

import Navbar from '../components/NavBar.vue';
export default {
  name: 'DashboardView',
  data() {
    return {
      name: localStorage['name'],
      len_list: 0,
      items: [],
      id: localStorage['id'],
      links_list: [{ title: 'Click Me' }, { title: 'Click Me' }],
      showMenu: false,
    };
  },
  methods: {
    getTrackers() {
      const path = 'http://localhost:5000/dashboard/' + localStorage['id'];
      axios
        .get(path)
        .then((res) => {
          this.items = res.data.list;
          console.log(res.data.list);
          this.len_list = res.data.list[0]['len_list'];
        })

        .catch((err) => {
          console.log(err);
        });

      console.log(this.items);
    },
    toggleMenu() {
      this.showMenu = !this.showMenu;
    },
    itemClicked() {
      this.toggleMenu();
    },
  },
  components: {
    Navbar,
  },
  created() {
    this.getTrackers();
  },
};
</script>

<style>
.dashboard {
  width: 100%;
  min-height: 100vh;
  color: #ffd700;
  background-image: url('../assets/wood-texture.jpg');
  overflow-x: auto;
  overflow-y: hidden;
}
.dashboard__welcome {
  margin-top: 2rem;
  font-weight: 600;
}
.plus__icon {
  margin-left: 58rem;
  width: 32px;
  height: 32px;
  margin-top: 1rem;
  color: #ffd700;
  padding: 1rem;
  border: 1px solid #ffd700;
  border-radius: 50%;
}
.no_lists {
  text-align: center;
  margin-top: 15rem;
}

.navbar__dash {
  background-color: black;
  color: white;
  max-width: inherit;
}
.has__lists {
  display: flex;
}
.list {
  padding: 10rem;
  border: 1px solid #ffd700;
  border-radius: 2rem;
  width: 20%;
  margin-left: 1rem;
  margin-top: 5rem;
  padding-bottom: 0px;
}
.title {
  background: #ffd700;
  color: black;
  width: 320px;
  text-align: center;
  margin-left: -10rem;
  margin-top: -10rem;
  height: 100px;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
.footer {
  margin-top: 10rem;
  background: #ffd700;
  color: black;
  width: 320px;
  margin-left: -10rem;
  margin-top: 0.01rem;
  margin-bottom: 0rem;
  height: 100px;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  text-align: center;
}
.body {
  background-color: white;
  width: 320px;
  color: grey;
  margin-left: -10rem;
  text-align: center;
  height: 10rem;
}
.list_name {
  margin-top: 0.6rem;
  padding: 2px;
  font-weight: 600;
  font-size: 20px;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.list__icon {
  width: 20px;
  height: 20px;
}
.title__options {
  display: flex;
  justify-content: center;
}
.dropdown_icon {
  padding: 0.2rem;
  color: #ffd700;
  background: black;
  margin-top: 15px;
  transition: var(--transition);
  border-radius: 2rem;
}
.dropdown_icon:hover {
  background: white;
  color: black;
  height: 20px;
}
.menu {
  background: white;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 1rem;
}
</style>

Screenshots:

https://i.sstatic.net/XYHpz.jpg https://i.sstatic.net/IUMq7.jpg

javascript vue.js

Answer 1

Answer №1

To ensure that each list functions independently, it is important to separate the relevant code. The best approach would be to isolate the section of the code responsible for displaying the items. By isolating the logic, each item can have its own showMenu variable, allowing only one item to be interacted with at a time.

Main Component

<template>
  <div class="dashboard">
    <Navbar class="navbar__dash" />
    <h1 class="dashboard__welcome">Welcome {{ name }}</h1>
    <div class="listview">
      <div class="no__lists" v-if="len_list === 0">
        <h2 class="no_lists">There are No lists here tap to add</h2>
      </div>
      <div class="has__lists" v-else>
        <div class="all__lists" v-for="(item, index) in items" :key="index">
            <Items :item="item"/> //Call Component Items
        </div>
      </div>
      <router-link :to="`/createList/${id}`">
        <fa class="plus__icon" icon="fa-solid fa-plus" />
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";

import Navbar from "../components/NavBar.vue";
export default {
  name: "DashboardView",
  data() {
    return {
      name: localStorage["name"],
      len_list: 0,
      items: [],
      id: localStorage["id"],
      links_list: [{ title: "Click Me" }, { title: "Click Me" }],
    };
  },
  methods: {
    getTrackers() {
      const path = "http://localhost:5000/dashboard/" + localStorage["id"];
      axios
        .get(path)
        .then((res) => {
          this.items = res.data.list;
          console.log(res.data.list);
          this.len_list = res.data.list[0]["len_list"];
        })

        .catch((err) => {
          console.log(err);
        });

      console.log(this.items);
    }
  },
  components: {
    Navbar, Items
  },
  created() {
    this.getTrackers();
  },
};
</script>

Child Component (Items)

<template>
<div>
  <div class="list">
    <div class="title">
      <div class="title__options">
        <h1 class="list_name">{{ item.list_name }}</h1>
        <div class="dropdown">
          <button @click="toggleMenu">
            <fa class="dropdown_icon" icon="fa-solid fa-arrow-down" />
          </button>
          <div v-if="showMenu" class="menu">
            <div
              class="menu-item"
              v-for="(item, index) in links_list"
              :key="index"
              @click="itemClicked"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="no_tasks" v-if="item.no_of_tasks === 0">
        <h3>There are no tasks added yet</h3>
      </div>
      <div class="has_tasks" v-else>
        <h4>Here are your tasks</h4>
      </div>
    </div>
    <div class="footer">
      Number of Completed tasks: {{ item.no_completed }}/{{ item.no_of_tasks }}
    </div>
  </div>
</div>
</template>

<script>
export default {

  props: {
    item: Item,
  },

  data() {
    return {
      showMenu: false,
    };
  },
  
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu;
    },
    itemClicked() {
      this.toggleMenu();
    },
  },
};
</script>

Answer 2

To ensure that each list functions independently, it is important to separate the relevant code. The best approach would be to isolate the section of the code responsible for displaying the items. By isolating the logic, each item can have its own showMenu variable, allowing only one item to be interacted with at a time.

Main Component

<template>
  <div class="dashboard">
    <Navbar class="navbar__dash" />
    <h1 class="dashboard__welcome">Welcome {{ name }}</h1>
    <div class="listview">
      <div class="no__lists" v-if="len_list === 0">
        <h2 class="no_lists">There are No lists here tap to add</h2>
      </div>
      <div class="has__lists" v-else>
        <div class="all__lists" v-for="(item, index) in items" :key="index">
            <Items :item="item"/> //Call Component Items
        </div>
      </div>
      <router-link :to="`/createList/${id}`">
        <fa class="plus__icon" icon="fa-solid fa-plus" />
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";

import Navbar from "../components/NavBar.vue";
export default {
  name: "DashboardView",
  data() {
    return {
      name: localStorage["name"],
      len_list: 0,
      items: [],
      id: localStorage["id"],
      links_list: [{ title: "Click Me" }, { title: "Click Me" }],
    };
  },
  methods: {
    getTrackers() {
      const path = "http://localhost:5000/dashboard/" + localStorage["id"];
      axios
        .get(path)
        .then((res) => {
          this.items = res.data.list;
          console.log(res.data.list);
          this.len_list = res.data.list[0]["len_list"];
        })

        .catch((err) => {
          console.log(err);
        });

      console.log(this.items);
    }
  },
  components: {
    Navbar, Items
  },
  created() {
    this.getTrackers();
  },
};
</script>

Child Component (Items)

<template>
<div>
  <div class="list">
    <div class="title">
      <div class="title__options">
        <h1 class="list_name">{{ item.list_name }}</h1>
        <div class="dropdown">
          <button @click="toggleMenu">
            <fa class="dropdown_icon" icon="fa-solid fa-arrow-down" />
          </button>
          <div v-if="showMenu" class="menu">
            <div
              class="menu-item"
              v-for="(item, index) in links_list"
              :key="index"
              @click="itemClicked"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="no_tasks" v-if="item.no_of_tasks === 0">
        <h3>There are no tasks added yet</h3>
      </div>
      <div class="has_tasks" v-else>
        <h4>Here are your tasks</h4>
      </div>
    </div>
    <div class="footer">
      Number of Completed tasks: {{ item.no_completed }}/{{ item.no_of_tasks }}
    </div>
  </div>
</div>
</template>

<script>
export default {

  props: {
    item: Item,
  },

  data() {
    return {
      showMenu: false,
    };
  },
  
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu;
    },
    itemClicked() {
      this.toggleMenu();
    },
  },
};
</script>

What is the best way to fix multiple dropdown menus opening simultaneously in Vue.js?

Answer №1

Similar questions

Creating an array dynamically by parsing a JSON object in Javascript

A guide on extracting the text content from an anchor tag by using xPath() with a combination of selenium and Mocha

Learn how to implement the PATCH method specifically for the scenario when the user clicks on the "forgot password"

Execute JavaScript using "matches" without the need for the page to refresh

Simple methods for ensuring a minimum time interval between observable emittance

Utilizing a Static Image Path Prop in React JS: A Step-by-Step Guide

Replacing an array element by a specific index number in a React application

Mastering the art of transitioning between DIV elements

Quickly remove items from a list without any keywords from the given keywords list

Instant Access to a Precise Slide

Using jQuery's toggle function with a double click event to change the display to none

Issue with translating grid header names in Ag-Grid Vue using i18n without requiring a refresh after changing the language

Is there a way to properly direct to an internal page while utilizing [routerLink] and setting target="_blank" without triggering a full page reload?

How can we efficiently add a new node to a polyline link in gojs while maintaining the original positions of points in the links adjacent to the inserted node

What is the best way to showcase the chosen items in a dropdown menu?

Unable to make changes to the AWS Dynamo array

Attempting to place the search bar within the navigation bar

Develop an HTML table using either JSON or jQuery in Javascript

I am attempting to establish a connection with the Converge Pro 2 system from Clearone using NodeJS node-telnet-client, but unfortunately, my efforts to connect have been unsuccessful

React - assigning a value to an input using JavaScript does not fire the 'onChange' event