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

Question

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

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

Second Link

还有更多，但还没有找到与我想要的足够相似的例子。

我已经添加了我目前拥有的 codepen 示例。徽章应该只出现在当前悬停的元素上，但是当任何元素悬停时，所有徽章元素都会被执行。

CodePen Link

也许我漏掉了一些明显的东西

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>

任何关于这种方式的建议的进一步帮助将不胜感激。

Answer 1

虽然显示属性是全球性的，但它对您悬停的每个项目都很重要。你想定位你悬停的元素。所以我建议像这样跟踪你悬停的项目的索引：https://codepen.io/reijnemans/pen/JjPrayp?editors=1010

    <div v-for="(dataArray, index) in testArray" @click="setCurrent(dataArray.name)">
      <v-badge
              :color="computedFavFruitColor[index]"
              right
      >
         <template v-slot:badge>
            <span v-if="show == index"><v-icon color="#ECF0FF">{{computedFavFruit[index]}}</v-icon></span>
         </template>
        <div @mouseenter="show = index" @mouseleave="show = null">
           {{dataArray.name}}
        </div>
      </v-badge>

   </div>

和show = null vue的数据块中的ipv show = true

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

Vuetify on mouseover toggle data object within array list

javascript

vue.js

vuetify.js

mouseover