如何解决如何使“ v-for”列表项的悬停唯一?
我有一个循环遍历几次的列表元素:
<template>
<ul id='movieSearchResultList'>
<li
v-for='movie in searchList'
v-on:mouseover='hoverEvent'
v-on:mouseout='hoverEvent'
:key='movie.id'>
<AddMovieToDashboard v-if='hover' />
</li>
</ul>
</template>
还有一个hoverEvent
将hover
属性切换为true / false:
export default class MovieSearchResultList extends Vue {
private hover = false;
public hoverEvent() {
this.hover = !this.hover;
}
get searchList(): Movie[] {
return MovieSearchListStore.state.searchList;
}
}
当我将鼠标悬停在列表元素上时,每个元素都将显示AddMovieToDashboard
组件,但是我只想将其显示在活跃地悬停的列表元素上。
解决方法
更新了for以包括索引:
v-for='(movie,index) in searchList'
然后在mouseOver上传递索引:
v-on:mouseover='hoverEvent(index)'
v-on:mouseleave='hoverEvent(null)'
public hover = -1;
public hoverEvent(index: number) {
this.hover = index;
}
最后检查索引是否与悬停相同:
<AddMovieToDashboard v-if='hover === index' />
,
想到两个选择...
-
只需使用CSS。
#movieSearchResultList li div { /* ? guessing your AddMovieToDashboard creates a div */ display: none; } #movieSearchResultList li:hover div { display: block; }
这将更像
v-show
,所以如果有问题,请继续... -
为列表项创建组件以封装功能
<ul id="movieSearchResultList"> <MovieSearchResult v-for="movie in searchList" :movie="movie" :key="movie.id" /> </ul>
MovieSearchResult
具有<li>
和mouseover
/mouseout
逻辑
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。