Dynamic Menu with Submenu Vuejs and JSON - json

Question

guys here's what I'm trying to do.
I want to create a vertical menu with submenus on it.
using this JSON code:
"response": {
"data": [
{
"id": 1,
"name": "AC Articles",
"subname": {
"data": [
{
"id": 14,
"sub_category": "Window PC"
},
{
"id": 15,
"sub_category": "Mac PC"
}
]
}
},
{
"id": 2,
"name": "MyPage Articles",
"subname": {
"data": []
}
},
{
"id": 3,
"name": "PC/Internet Optimization",
"subname": {
"data": []
}
},
{
"id": 4,
"name": "Troubleshooting Guide",
"subname": {
"data": []
}
},
{
"id": 5,
"name": "Others",
"subname": {
"data": []
}
},
{
"id": 6,
"name": "Previous Announcements",
"subname": {
"data": []
}
},
{
"id": 7,
"name": "Operational Update",
"subname": {
"data": []
}
},
{
"id": 8,
"name": "LS Updates",
"subname": {
"data": []
}
},
{
"id": 9,
"name": "Fees Articles",
"subname": {
"data": []
}
},
{
"id": 10,
"name": "Teacher's Promotion Guide",
"subname": {
"data": []
}
},
{
"id": 11,
"name": "Modified Mypage Unlocking Process",
"subname": {
"data": []
}
},
{
"id": 12,
"name": "Training Specialization",
"subname": {
"data": []
}
},
{
"id": 13,
"name": "PHBee TESOL Common Concerns/Inquiries",
"subname": {
"data": []
}
}
]
}
so far here's what i have done
<ul class="nav flex-column">
<li
v-for="list in categories"
:key="list.id"
class="nav-item dropdown"
>
<a
v-if="list.subname"
class="nav-link dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>{{ list.name }}</a>
<a
v-else
class="nav-link"
role="button"
>{{ list.name }}</a>
<div v-for="sub in list.subname" :key="sub.id" class="dropdown-menu">
<a class="dropdown-item">{{ list.subname }}</a>
</div>
</li>
</ul>
I also want to check if there's a submenu on each menu, if there's a submenu it will create a dropdown else no dropdown for that menu
hope you guys help me.
Thank you

Answer 1

you can try this in v-if condition
v-if="list.subname.data.length > 0"