Open one UL #click in a loop generated menu with Vuejs - list

Question

Still working on my menu and struggling with a new problem.
I want the user to be able to the LI submenus when there is a click on the UL.
The problem is that I don't see how to aim only at the linked LI elements. When I click on any UL, it opens all the LI.
An easy way could be to create different UL in HTML, but I would like to keep this short generated with a loop menu.
How can I aim at the precise UL with the #click event, to open only its child LI?
new Vue({
el: "#app",
data: {
categories: {
Atoms: ['Buttons', 'Icons'],
Molecules: [],
Organisms: [],
Templates: [],
Utilities: ['Grid']
},
openSubCategories: false,
},
})
.doc_nav {
display: flex;
justify-content: around;
}
.doc_nav__ul {
margin: 0 30px;
}
.doc_nav__li {
text-align: center;
}
.doc_nav__li:first-child {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<header class="doc_header">
<nav class="doc_nav">
<ul #click="openSubCategories = !openSubCategories" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
<template v-if="openSubCategories == true" >
<li class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
{{ subCategory }}
<!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
</li>
</template>
</ul>
</nav>
</header>
</div>

Answer 1

Use CSS to hide li.
I think you can handle it.
new Vue({
el: "#app",
data: {
categories: {
Atoms: ['Buttons', 'Icons'],
Molecules: [],
Organisms: [],
Templates: [],
Utilities: ['Grid']
},
currentActiveCategory: null,
},
method: {
changeClickUl(category) {
if (category == this.currentActiveCategory) this.currentActiveCategory = null
else this.currentActiveCategory = category
}
}
})
.doc_nav {
display: flex;
justify-content: around;
}
.doc_nav__ul {
margin: 0 30px;
}
.doc_nav__ul:not(visible) {
display: none;
}
.doc_nav__li {
text-align: center;
}
.doc_nav__li:first-child {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<header class="doc_header">
<nav class="doc_nav">
<ul #click="changeClickUl(category)" :class="{visible:currentActiveCategory==category}" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
<li class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
{{ subCategory }}
<!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
</li>
</ul>
</nav>
</header>
</div>

Answer 2

Here is the corrected and working answer of gao.xiangyang
It is using css.
A solution without css: v-if="currentActiveCategory==category"
new Vue({
el: "#app",
data: {
categories: {
Atoms: ['Buttons', 'Icons'],
Molecules: [],
Organisms: [],
Templates: [],
Utilities: ['Grid']
},
currentActiveCategory: null,
},
methods: {
displaySubCategories(category) {
if (category == this.currentActiveCategory) {
this.currentActiveCategory = null
}
else this.currentActiveCategory = category
}
}
})
.doc_nav {
display: flex;
justify-content: around;
}
.doc_nav__ul {
margin: 0 30px;
}
.doc_nav__li:not(visible) {
display: none;
}
.doc_nav__li--visible {
display: block !important;
}
.doc_nav__li {
text-align: center;
}
.doc_nav__li:first-child {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<header class="doc_header">
<nav class="doc_nav">
<ul #click="displaySubCategories(category)" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
<li :class="{'doc_nav__li--visible' : currentActiveCategory==category}" class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
{{ subCategory }}
<!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
</li>
</ul>
</nav>
</header>
</div>