vue.js - 在Vue JS中根据ID悬停时显示Div
问题描述
我有一个 div,当我想将鼠标悬停在它上面时,它会显示其他 div。但是,我的第一个 div 是动态的,它有一个 ID。那么我将如何根据其 ID 将鼠标悬停在 ID 上?
它应该是@mouseenter="hoverService{{services.id}} = true"
,但它会导致错误。所以我把下面的代码变成了静态的。
下面是我的代码:
<template>
<div
class="col-md-3"
v-for="(services, index) in servicesFiltered"
:key="index"
@mouseenter="hoverService = true"
@mouseleave="hoverService = false"
>
<div class="service_background" v-if="hoverService">
<div class="mb-1" v-for="(sub_services, index) in services.menu_items" :key="index">
<router-link
:to="{ path: `/${sub_services.data}`}"
>
<a
href="#"
class="btn btn-outline-primary w-100 services_button"
>{{sub_services.text }}</a>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hoverService: false
};
}
};
</script>
解决方案
推荐阅读
- java - 我想通过单击外部 recyclerview 上的按钮来添加内部网格视图
- flask - flask 和 tailwind - 渲染时不使用 master.css 中的更改
- sql - ORA-00907:缺少右括号 00907. 00000 - “缺少右括号” *原因:*操作:
- r - 最大和最小周期之间的时间
- autodesk-forge - 尝试使用演示但无法找出问题所在
- jenkins - 集成测试无法连接到 Jenkins 中的 Postgres 9.6 Db
- alexa - 推送要与 Alexa 对话的消息
- css - 带有 vue 的 Plotly.js 在调整大小和数据更改时消失图表
- c# - 即使统一构建,omnisharp 也找不到命名空间
- java - 将数据添加到 firebase 实时数据库显示错误