Наведите курсор на приложение vue на определенный элемент в цикле v-for

Question

<v-toolbar-items>
  <v-btn 
    color="primary"
    active-class="default-class"
    flat
    v-for="item in horizontalNavItems"
    :key="item.title"
    :to="item.link">{{item.title}}</v-btn>
</v-toolbar-items>

export default {
  data () {
    return {
    };
  },
  computed: {
    horizontalNavItems () {
      return [
        { title: "About Us", link: "/" },
        { title: "The Brand", link: "/" },
        { title: "Investors", link: "/"},
        { title: "People", link: "/" },
        { title: "Contact Us", link: "/" }
      ];
    }
  }
}

Мне нужна помощь с моим приложением VUE, @mouseover и @mouseleave для определенного элемента в этом цикле навигации v-for, когда я наведите курсор, скажем, Инвесторы, я хочу выпадающий список, как показано на рисунке?

Answer 1

, когда мышь наведена на элемент. Это можно выяснить, отслеживая, когда мышь входит в элемент и когда мышь покидает элемент.

<v-toolbar-items>
      <v-btn 
        color="primary"
        active-class="default-class"
        flat
        v-for="item in horizontalNavItems"
        :key="item.title"
        :to="item.link"
        @mouseover="somefuntion
        @mouseleave="somefuntion"{{item.title}}</v-btn>
    </v-toolbar-items>

Скрипка: https://codepen.io/intotheprogram/pen/ZjxZdg

Answer 2

Прочитайте это: https://michaelnthiessen.com/hover-in-vue/ но в основном вам нужно создать событие mouseover и затем ответить на него либо переменной, либо функцией для отображения вашего списка. Список может быть v-if="someVal" (имеется в виду, если someVal верно)