Show Submenu On Mouse Enter Vuejs - html

Question

Sorry I'm really new to all this.
I'm trying display a submenu during a menu item mouse-over. I've been given hints on recording the index of menu items, and recording the boolean value of whether the user currently has their mouse over the top menu's nav container. However I do not know how to proceed on using these to create conditional renderings for the submenu. Here's what I've tried:
HTML:
<div id="vuemain">
<nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" class="pure-menu-item">
<a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a>
</li>
</ul>
<div class="pure-menu">
<ul id="submenu" class="pure-menu-list">
<li v-if= "topmenuhover == true" class="pure-menu-item">
<a v-bind:href="topmenu[topmenuitem].submenus.url" class="pure-menu-link">{{ topmenu[topmenuitem].submenus.title }}</a></li>
</ul>
</div>
</nav>
</div>
JS:
var vueinst = new Vue({
el: '#vuemain',
data: {
topmenuitem : -1,
topmenuhover : false,
topmenu: [
{ title:'Home', url:'/', submenus: [] },
{ title:'About', url:'/about',
submenus: [
{ title:'Who we are', url:'/about#us' },
{ title:'What we do', url:'/about#store' },
{ title:'Our range', url:'/about#range' }
]
},
{ title:'Contact Us', url:'/contact',
submenus: [
{ title:'Information', url:'/contact#info' },
{ title:'Returns', url:'/contact#return' },
{ title:'Locate Us', url:'/contact#locate' }
]
}
]
},
methods: {
mouseOver: function(index){
this.topmenuitem=index;
},
mouseOverNav: function(){
this.topmenuhover = true;
},
mouseLeaveNav: function(){
this.topmenuhover = false;
}
}
});
Can anyone help me with this? Thank you!

Answer 1

The Javascript part should do the trick, you just need to tweak the template a bit to actually render the submenu. Here's how you could do it:
var vueinst = new Vue({
el: "#vuemain",
data: {
topmenuitem: -1,
topmenuhover: false,
topmenu: [
{ title: "Home", url: "/", submenus: [] },
{
title: "About",
url: "/about",
submenus: [
{ title: "Who we are", url: "/about#us" },
{ title: "What we do", url: "/about#store" },
{ title: "Our range", url: "/about#range" },
],
},
{
title: "Contact Us",
url: "/contact",
submenus: [
{ title: "Information", url: "/contact#info" },
{ title: "Returns", url: "/contact#return" },
{ title: "Locate Us", url: "/contact#locate" },
],
},
],
},
methods: {
mouseOver: function (index) {
this.topmenuitem = index;
},
mouseOverNav: function () {
this.topmenuhover = true;
},
mouseLeaveNav: function () {
this.topmenuhover = false;
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vuemain">
<nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" class="pure-menu-item">
<a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a>
</li>
</ul>
<div class="pure-menu">
<ul v-if="topmenuhover" id="submenu" class="pure-menu-list">
<li v-for="subitem in topmenu[topmenuitem].submenus" class="pure-menu-item">
<a v-bind:href="subitem.url" class="pure-menu-link">{{ subitem.title }}</a></li>
</ul>
</div>
</nav>
</div>