Show Submenu On Mouse Enter Vuejs

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>