vuejs for triggering dropdown show - vue.js

Question

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,
};
},

Answer 1

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.