Currently, I am facing a challenge in Vue 3 while attempting to design a menu with categories and corresponding subcategories. The objective is that upon clicking on a category, only the specific subcategories related to that category should be displayed below, and they should disappear upon another click. However, my issue lies in achieving this functionality for each individual category. Every time I click on a category, all subcategories from every category are being shown.
To provide more context, I have simplified my code into an example:
JS :
const menu = [
{
label: "Category 1",
key: "category_1",
subcategories: [
{
label: "1 - Subcategory 1",
key: "1_subcategory_1",
},
{
label: "1 - Subcategory 2",
key: "1_subcategory_2",
},
],
},
{
label: "Category 2",
key: "category_2",
children: [
{
label: "2 - Subcategory 1",
key: "2_subcategory_1",
},
],
},
];
const isDisplay = ref(false);
const showSubcategories = () => {
isDisplay.value = !isDisplay.value
}
VUE :
<template>
<div v-for="category in menu" :key="category.key">
<div @click="showSubcategories()">
<span> {{ category.label }}</span>
</div>
<div v-if="isDisplay">
<div
v-for="subcategory in category.subcategories"
:key="subcategory.key"
>
{{ subcategory.label }}
</div>
</div>
</div>
</template>
I have tried adding an index or passing parameters such as showSubcategories(category.key) to my function, but so far, I have not been able to resolve the issue. Any help or suggestions would be greatly appreciated. Thank you.