Utilizing the Vue programming language and Element-ui framework, my code functions in a way where if an object contains something, it will be displayed. Otherwise, the menu button is disabled.
The expected output should look like:
a, b(disable), c, d, e
However, my current output is:
a, a(disable), b(disable), c(disable), d(disable), e(disable), c, d, e
If there is a flip between the v-if statement and v-else-if statement, the output changes to:
a(disable), b(disable), c(disable), d(disable), e(disable), b, a(disable), b(disable), c(disable), d(disable), e(disable), a(disable), b(disable), c(disable), d(disable), e(disable), a(disable), b(disable), c(disable), d(disable), e(disable)
Therefore, I suspect that when the if-else condition is true, the for loop displays items based on whether they meet the condition rather than displaying specific items that pass the condition.
In cases where an array contains something, both the array and its child are displayed.
<el-menu
:default-active="activeIndex"
mode="horizontal"
@select="handleSelect">
<el-submenu
v-if="item.subCategories && item.subCategories.length <= 0"
v-for="(item, index) in category.categories" :index="(index+1).toString()"
:key="item.parentCategory.categoryId">
<template slot="title">
{{ item.parentCategory.categoryName}}
</template>
<el-menu-item
index="(index+1).toString()-(i+1).toString()"
v-for="(child, i) in item.subCategories"
:key="child.categoryId"
@click="searchEventByCategory(item.parentCategory.categoryId, child.categoryId)">
{{ child.categoryName }}
</el-menu-item>
</el-submenu>
When an array contains nothing, the menu cannot be clicked and does not have any children.
<el-submenu
v-else-if="item.subCategories && item.subCategories.length > 0"
disabled
v-for="(item, index) in category.categories" :index="(index+1).toString()"
:key="item.parentCategory.categoryId">
<template slot="title">
{{ item.parentCategory.categoryName}}
</template>
<el-menu-item>
</el-menu-item>
</el-submenu>
</el-menu>
Lastly, I am wondering if it is possible for objects that contain nothing to display as independent menu items (el-menu-item) instead of being part of a submenu (el-submenu) with second-level menus.
Please assist me with this issue! Thank you.