Nuxt / Vue navigation menu issue with WP API V2 - wordpress

Question

Im building a website with Nuxt and headless wordpress. All data is coming from wordpress api (wp-json).
I'm having an issue with navigation menu, with parent/child menu items.
On parent element click, every menu item that has children is triggered at once.
I need it to trigger only the one I click on.
Here's what happens #click right now
Heres what I have so far:
HTML:
<nav>
<div class="">
<!-- Triggers burger menu -->
<ul :class="isOpen ? 'block' : 'hidden'" class="sm:flex">
<!-- Loop through the parent navigation -->
<!-- Add click event to trigger dropdown menu -->
<li class="sm:mx-8 text-white cursor-pointer py-4 sm:py-0"
v-for="item in linksArray"
:key="item.ID"
#click="isOpen = !isOpen"
>
<!-- Insert the data from wp-json -->
<div class="">
<!-- Parent navigation elements -->
<div class="flex items-center">
<div class=""> {{item.title}} </div>
</div>
<!-- Child navigation here -->
<div>
<!-- Trigger show or hide child elements on click from above -->
<ul
v-show="isOpen"
class="sm:absolute bg-gray-800 rounded mt-4"
>
<!-- Loop through the child elements -->
<li class="text-white rounded hover:bg-gray-700 cursor-pointer py-2 px-2"
v-for="childItem in item.child_items"
:key="childItem.ID"
>
<!-- Insert the data for children from wp-json -->
<nuxt-link :to="childItem.url">
<div class="flex items-center">
<span class="title">
{{ childItem.title }}
</span>
</div>
</nuxt-link>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
Script:
<script>
export default {
name: "Navbar",
props: {
linksArray: {
type: Array
},
},
data() {
return {
isOpen: false,
};
},
watch: {
// Use to close the menu on route change
'$route'() {
this.isOpen = false;
},
}
};
</script>
wp-json menu response
{
"term_id": 2,
"name": "Main",
"slug": "main",
"term_group": 0,
"term_taxonomy_id": 2,
"taxonomy": "nav_menu",
"description": "",
"parent": 0,
"count": 14,
"filter": "raw",
"items": [
{
"ID": 319,
"post_author": "1",
"post_date": "2020-01-11 21:42:33",
"post_date_gmt": "2020-01-11 21:42:33",
"post_content": "",
"post_title": "Games",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "games",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=319",
"menu_order": 1,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 319,
"menu_item_parent": "0",
"object_id": "319",
"object": "custom",
"type": "custom",
"type_label": "Custom Link",
"title": "Games",
"url": "#",
"target": "",
"attr_title": "",
"description": "",
"classes": [],
"xfn": "",
"logo": {},
"child_items": [
{
"ID": 321,
"post_author": "1",
"post_date": "2020-01-11 21:42:33",
"post_date_gmt": "2020-01-11 21:42:33",
"post_content": "",
"post_title": "Dota 2",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "dota-2",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=321",
"menu_order": 2,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 321,
"menu_item_parent": "319",
"object_id": "301",
"object": "games",
"type": "post_type",
"type_label": "Game",
"url": "http://localhost/games/dota-2/",
"title": "Dota 2",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": "",
"logo": {},
"slug": "dota-2"
},
{
"ID": 322,
"post_author": "1",
"post_date": "2020-01-11 21:42:33",
"post_date_gmt": "2020-01-11 21:42:33",
"post_content": "",
"post_title": "Overwatch",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "overwatch",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=322",
"menu_order": 3,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 322,
"menu_item_parent": "319",
"object_id": "264",
"object": "games",
"type": "post_type",
"type_label": "Game",
"url": "http://localhost/games/overwatch/",
"title": "Overwatch",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": "",
"logo": {},
"slug": "overwatch"
},
{},
{},
{}
]
},
{
"ID": 320,
"post_author": "1",
"post_date": "2020-01-11 21:42:33",
"post_date_gmt": "2020-01-11 21:42:33",
"post_content": "",
"post_title": "Gambling",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "gambling",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=320",
"menu_order": 7,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 320,
"menu_item_parent": "0",
"object_id": "320",
"object": "custom",
"type": "custom",
"type_label": "Custom Link",
"title": "Gambling",
"url": "#",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": "",
"logo": {},
"child_items": [
{
"ID": 336,
"post_author": "1",
"post_date": "2020-01-12 00:46:53",
"post_date_gmt": "2020-01-12 00:46:53",
"post_content": "",
"post_title": "CSGO Gambling",
"post_excerpt": "",
"post_status": "publish",
"comment_status": "closed",
"ping_status": "closed",
"post_password": "",
"post_name": "csgo-gambling",
"to_ping": "",
"pinged": "",
"post_modified": "2020-01-15 21:10:20",
"post_modified_gmt": "2020-01-15 21:10:20",
"post_content_filtered": "",
"post_parent": 0,
"guid": "http://localhost/?p=336",
"menu_order": 8,
"post_type": "nav_menu_item",
"post_mime_type": "",
"comment_count": "0",
"filter": "raw",
"db_id": 336,
"menu_item_parent": "320",
"object_id": "336",
"object": "custom",
"type": "custom",
"type_label": "Custom Link",
"title": "CSGO Gambling",
"url": "/csgo/gambling",
"target": "",
"attr_title": "",
"description": "",
"classes": [
""
],
"xfn": "",
"logo": {}
}
]
},
{},
{},
{}
]
}
I'm new to development, and been stuck on this for over a week now.
Don't know where to look for answers. Found nothing on here or google.
Could you please point me at what I'm doing wrong or at the solution please.
Thanks!

Answer 1

In your code, all children are using the same variable to say if they should be shown or not. As a result, if this variable is true then all children will be show, and if it's false then all will be hidden.
You need track which menu items you want to show. Here is an example of how you could achieve this:
new Vue({
el: "#app",
data: {
menu: [{
title: "Main one",
children: ['child 1', 'child 2', 'child 3']
},
{
title: "Main two",
children: ['child 4', 'child 5', 'child 6']
},
{
title: "Main three",
children: ['child 7']
},
{
title: "Main four",
children: ['child 8', 'child 9']
}
],
openMenu: null
},
methods: {
showChildren(i) {
if (this.openMenu === i) this.openMenu = null
else this.openMenu = i
}
}
})
li {
margin: 8px;
padding: 8px;
background: pink;
cursor: pointer;
}
<div id="app">
<h2>menu:</h2>
<ul>
<li v-for="(nav, i) in menu" #click="showChildren(i)">
{{nav.title}}
<ul v-show="openMenu === i" v-for="child in nav.children">
<li>{{ child }}</li>
</ul>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Basically, this works by only showing the children if openMenu is the same as the parent items index within the array.
When you click the parent, it sends its index to a function function which checks if it's already open (openMenu is equal to the parents index), and if so changes openMenu to null to hide the children. Else it sets openMenu to the parent index, making v-show="openMenu === i" valid for that parent.