<li v-for="user in users" :key="user.id" class="nav-list" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<router-link class="nav-link" :to="nameLowerCase(user.enName)">
<img :src="imgSrc(user)">
<p>{{user.enName}}</p>
</router-link>
</li>
data: function () { return { isHovering : false, } },
imgSrc(user) {
const trimmedUrl = user.darkIconImageUrl;
const trimmedColorUrl = user.lightIconImageUrl;
const trimmedBase = trim(AWS.BASEURL_ORIGINAL, '/');
const trimmedBucket = trim(AWS.BUCKET, '/');
if(this.isHovering) {
return `${trimmedBase}/${trimmedBucket}/${trimmedColorUrl}`;
}
return `${trimmedBase}/${trimmedBucket}/${trimmedUrl}`;
},
When the menu items are hovered over, they switch to different images due to shared data. The attempt using onmouseover did not yield desired results. Assistance with this issue would be greatly appreciated as English is not my native language.