vuejs for triggering dropdown show

user_16965147 0
Viewed 69

I want the dropdown to be opened when ul is clicked on the menu I want, in the same way, when the 2nd dropdown is clicked, the open dropdown will be closed.

<template>
    <li>
        <MenuLink
            :link="items"
            :key="items.name"
            @click.stop="clickShow()"
        />
        <ul class="children" v-if="hasChild" :class="open ? 'show' : 'hidden'">
            <MenuItems
                v-for="subItem in items.children"
                :key="subItem.name"
                :items="subItem"
            />
        </ul>
    </li>

</template>
<script>

export default {
    name: 'MenuItems',
    components: {MenuLink},
    props: {
        items: {type: Object, required: true},
        level: {
            type: Number,
            default: 0
        }
    },
data() {
        return {
            childrenCount: 0,
            active: false,
            show: null,
            open: false,
        };
    },
vue.js
1 Answers

This is a I found that worked for me. Also, I used the vue composition api, which I highly recommend using.

<template>
  <ul v-if="showDropdownX">
    <li>This is X</li>
    <li>This is X</li>
    <li>This is X</li>
  </ul>
  <button @click="handleShowX">Toggle dropdown X</button>

  <ul v-if="showDropdownY">
    <li>This is Y</li>
    <li>This is Y</li>
    <li>This is Y</li>
  </ul>
  <button @click="handleShowY">Toggle Dropdown Y</button>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  setup() {
    const showDropdownX = ref(false);
    const showDropdownY = ref(false);

    const handleShowX = () => {
      showDropdownX.value = !showDropdownX.value;
      showDropdownY.value = false;
    };
    const handleShowY = () => {
      showDropdownY.value = !showDropdownY.value;
      showDropdownX.value = false;
    };

    return {
      showDropdownX,
      showDropdownY,
      handleShowX,
      handleShowY,
    };
  },
};
</script>

I hope this works for you, I haven't used the exact same code which you used, but I think my example is great to understand the concept of v-if

Edit:

Now the other dropdown will also disappear when you click on one of them.

user_178335050
Related