当NUXT-Link处于活动状态时，请更改图标？

Question

我在Navbar中有3个链接，每个链接包含2个图标（假设Icon-1和Icon-2），但是我只想一次显示1个图标。

---

iCON-1当NUXT-LINK处于活动状态并悬停的

---

ICON-2当NUXT-Link不活动时，

这是我的代码，

     <ul>
        <li class="nav-list-item" v-for="(link, i) in navLinks" :key="i">
          <nuxt-link :to="link.path">
            <img :src="link.inactive"> //this is icon-1
            <img :src="link.active"> //this is icon-2
            <span class="nav-title">{{link.title}}</span>
          </nuxt-link>
        </li>
      </ul>

这是我的脚本

data() {
    return {
      

      navLinks: [
        { 
          title: 'Link 1', 
          path: '/' , 
          inactive: './Icons/home-icon-1.svg', 
          active: './Icons/home-icon-2.svg'
        },
        { 
          title: Link 2', 
          path: '/about' , 
          inactive: './Icons/about-icon-1.svg', 
          active: './Icons/about-icon-2.svg'
        },
        { 
          title: 'link 3', 
          path: '/contact' , 
          inactive: './Icons/contact-icon-1.svg', 
          active: './Icons/contact-icon-2.svg'
        },
        
      ]
    }
  },

Answer 1

首先，您需要在每个链接对象中设置活动状态：

    {
      title: 'Link 1',
      path: '/',
      inactive: './Icons/home-icon-1.svg',
      active: './Icons/home-icon-2.svg',
      isActive: false,
    },

然后，您必须在NUXT链接和逻辑上设置两个本机事件侦听器以显示IMG：

<nuxt-link
    :to="link.path"
    @mouseover.native="link.isActive = true"
    @mouseleave.native="link.isActive = false"
  >
    <img v-if="link.isActive"
          :src="link.inactive">
    <img v-else
      :src="link.active">
    <span class="nav-title">{{ link.title }}</span>
</nuxt-link>