3 months ago

Dropdowns in vue

Posted 3 months ago by MorganC3

Hi all Im very new to VueJS (Nuxt) im have used alpine js a little but decided to learn view and I have a navbar set up where I want multiple dropdowns at the minute I have it set up to display the dropdown and all the dropdowns show at once but I only want to show one at a time.

the code I have

<template v-for="category in categories">
          <template v-if="category.children.length">
            <div class="navbar-item is-hoverable has-dropdown" :key="category.slug">
                :to="{ name: 'index' }" @click="dropdown = !dropdown"
                class="block mt-4 lg:inline-block lg:mt-0 mr-4 text-md cursor-pointer">
                {{ }}
              <!-- DropDown Menu -->
             <div v-show="dropdown" class="mt-2 py-2 w-48 bg-white rounded-lg shadow-xl absolute text-gray-800">
                <nuxt-link :to="{ name: 'index' }" v-for="child in category.children" :key="child.slug" v-model="category.slug"
                class="block px-2 py-1 font-semibold rounded hover:bg-gray-800 hover:text-white">
                  {{ }}

          <template v-else>
            <nuxt-link :to="{ name: 'categories-slug', params: { slug: category.slug } }" :key="category.slug" class="navbar-item">
              {{ }}

  import { mapGetters } from 'vuex'

  export default {
    computed: {
        categories: 'categories'
    data() {
      return {
        mobileMenu: false,
        cartMobile: false,
        cart: false,
        dropdown: false


Please sign in or create an account to participate in this conversation.