Data Property to Hold Index of Array Object during Mouse Over Vuejs - html

Question

I've used list rendering to create a menu with items from an array. I'm now trying to create a new data property which holds the index of the array item when the item of the menu is mouse-overed but I'm not sure of how to do it. Here's what I've tried:
HTML:
<header>
<nav class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="item in topmenu" class="pure-menu-item">
<a v-bind:href="item.url" v-on:mouseover="mouseOver" class="pure-menu-link">{{ item.title }}</a></li>
<li v-for="item in topmenu.submenus" 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">
</ul>
</div>
</nav>
</header>
JS:
var vueinst = new Vue({
el: '#vuemain',
data: {
topmenuitem : 0,
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(){
this.topmenuitem = this.topmenu.index;
}
}
});
I'm pretty new to web developing, please help me with this. Thank you!

Answer 1

In your html pass the index of the current item to the mouseOver function like the following:
<header>
<nav class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="item in topmenu" :key="item.index" class="pure-menu-item">
<a v-bind:href="item.url" v-on:mouseover="mouseOver(item.index)" class="pure-menu-link">{{ item.title }}</a></li>
<li v-for="item in topmenu.submenus" 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">
</ul>
</div>
</nav>
</header>
And you should bind key in the v-for like :key="item.index". And then in your mouseOver function accept the index of the item as a parameter and push the element on that index into your new array ass follows.
mouseOver: function(index){
this.topmenuitem.push(index);
}
This way you could get the index of all items hovered on.