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

by

0👍

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.

Leave a comment