Javascript 将v-if用于v-for中的特定元素
因此,我的Vue页面上有以下HTMLJavascript 将v-if用于v-for中的特定元素,javascript,vue.js,javascript-framework,v-for,Javascript,Vue.js,Javascript Framework,V For,因此,我的Vue页面上有以下HTML <div v-for="profile in lab.profiles" v-if="edit || profile.active" class="lab-tests-row-div" @mouseover=""> <div class="clickBox" :class="['clickBox-' + lab.id + '-' + profile.id]" @click="openInfoPopup"><
<div v-for="profile in lab.profiles" v-if="edit || profile.active" class="lab-tests-row-div" @mouseover="">
<div class="clickBox" :class="['clickBox-' + lab.id + '-' + profile.id]" @click="openInfoPopup"></div>
<p class="lab-tests-row test-info-row" v-bind:class="{'active': profile.active}">
<span v-bind:class="{'opacity50':!profile.active}">{{profile.name}}</span>
<i v-if="edit" class="fa fa-minus pull-right removeTestIcon" aria-hidden="true" @click="toggleProfile(lab.id, profile.id)"></i>
<span class="pull-right" v-bind:class="{'opacity50':!profile.active}">{{profile.code}}</span>
</p>
</div>
{{profile.name}
{{profile.code}
我想在用户将鼠标悬停在该行上时显示元素“clickBox”,如果我使用带布尔值的v-if并在鼠标上更改它,那么它们都将显示,因为它们位于v-for中,我如何仅在它们悬停的行中显示div 在指令中,您可以获得元素的索引v-for=“(profile,index)
使用该索引仅在模板中显示所需的样式
比如说
newvue({
el:“#应用程序”,
数据:{
已选:0
}
})
.selectedClass{
背景:浅蓝色
}
.hover类别:hover{
背景:轻珊瑚
}
{{elem}
https://stackoverflow.com/posts/54025706/edit#
此解决方案的问题是v-for嵌套在另一个v-for中,因此其他v-for中具有相同索引的所有其他元素也将显示。此处的示例:selected为0,但第一项显示在两个子列表中,而不是我想要的一个子列表中