在下一个链接激活时更改图标?

Question

我在导航栏中有3个链接，每个链接包含2个图标(让我们说icon-1和icon-2)，但我想一次只显示一个图标。

---

icon-1当next -link处于活动状态并悬停

---

icon-2当next -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,
},

则必须在下一个链接和逻辑上设置两个本机事件侦听器以显示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>