Javascript 鼠标悬停时Vuetify切换数组列表中的数据对象

我正在尝试实现一个功能，当包含的div悬停在上面时，该功能将为列表中的每个数组对象切换Vuetify badge元素

我能够使用css在v-for数组列表中创建类似悬停的功能，这相当简单，但如何使用vuetify组件实现类似的结果？由于我没有发现任何讨论或证明这一点的问题，所以假设这是可能的。调查

还有更多，但我还没有找到足够的类似的例子来说明我的愿望

我已经添加了我目前拥有的代码笔示例。 徽章应仅出现在当前悬停的元素上，但当任何元素悬停时，所有徽章元素都将被执行

  <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>

也许我错过了一些显而易见的东西

HTML部分

  <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>

我最喜欢的水果是{{favoritefruit}}

{{computedFavFruit[index]}
{{dataArray.name}

---

如果您对这种方式有任何进一步的建议，我们将不胜感激。

虽然show属性是全局的，但它对您悬停的每个项目都很重要。您希望以悬停的元素为目标。因此，我建议跟踪您悬停的项目的索引，如下所示：

{{computedFavFruit[index]}
{{dataArray.name}

vue数据块中的ipv

show=true