MorganC3
3 months ago
578
4
Vue

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">
              <div
                :to="{ name: 'index' }" @click="dropdown = !dropdown"
                class="block mt-4 lg:inline-block lg:mt-0 mr-4 text-md cursor-pointer">
                {{ category.name }}
              </div>
              <!-- 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">
                  {{ child.name }}
                </nuxt-link>
              </div>

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

  import { mapGetters } from 'vuex'

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

  }
</script>

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