yaminncco / vue-sidebar-menu

A Vue.js Sidebar Menu Component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hover event on a single menu item

dmtolent opened this issue · comments

Hi! Would it be possible to add hover event on a single menu item and access the properties of that menu item object? If not, what would be the best implementation for this? Thanks!

Without knowing what you're trying to accomplish, in v5 the attributes property can accept events listeners.
a possible solution:

{
  href: '/home',
  title: 'Home',
  attributes: {
    'data-id': 'unique-id',
    onMouseover: (e) => {
      const item = this.menu.find((item) => {
        return item.attributes?.['data-id'] === e.currentTarget.dataset.id
      })
      console.log(item)
    }
  }
}

Thanks for the quick response! Is it possible to accommodate this for Vue 2 as well?

This specific use-case can be implemented in userland using addEventListener.