I'm currently working on a project where I need to toggle a Vuetify badge element for each item in an array when the containing div is hovered over.
While I've been able to achieve a similar effect using CSS in a v-for loop with an array list, I'm struggling to figure out how to accomplish the same outcome with Vuetify components. Despite searching through various resources like:
- First Link
- Second Link
- Third Link
I still haven't found a solution that fits my specific needs.
You can view the current implementation I have in this CodePen Link. The issue lies in the fact that all badge elements are being triggered when any one of the elements is hovered over, rather than just the one being hovered on.
Here's a snippet of the HTML code:
<template>
<div id="app">
<div>My favourite fruit is <b>{{favouriteFruit}}</b></div> <br>
<div v-for="(dataArray, index) in testArray" @click="setCurrent(dataArray.name)">
<v-badge
:color="computedFavFruitColor[index]"
right
v-model="show"
>
<template v-slot:badge>
<span><v-icon color="#ECF0FF">{{computedFavFruit[index]}}</v-icon></span>
</template>
<div @mouseover="show = true" @mouseleave="show = false">
{{dataArray.name}}
</div>
</v-badge>
</div>
</div>
</template>
If anyone has suggestions or further guidance on how to resolve this issue, it would be greatly appreciated.