在 vue 中，如何不允许鼠标悬停影响列表的每个元素?

Question

我有一个 v-for，列表中的每个元素都有一个鼠标悬停事件。我希望当鼠标悬停在该元素上时，会更改一个变量值，因此该元素旁边会出现一个div(.checkboxdiv(。但相反，由于所有元素都使用相同的变量，因此会出现所有div。这是我的代码：

<md-card v-for="route in routes" :key="route.id">
<md-card-area>
<div class="checkbox" v-show="hover == true" @mouseover="hover = true">
<input type="checkbox" v-model="route.checked"/>
</div>
<div @mouseover="hover = true" @mouseout="function() { if (route.checked == false) hover = false }">
</div>
</md card-area>
</md-card>

我尝试使用mouseover.native，但它不起作用。我也尝试使用而不是更改悬停变量，更改 route.hover 变量，但它不会被更改。

Answer 1

添加另一个名为currentIndex的变量：

data(){
return{
currentIndex:-1,
hover:false,
}
}

在 v-for 循环中添加index并使用悬停索引更新currentIndex，并将此条件添加到hover == true && currentIndex===index：

<md-card v-for="(route,index) in routes" :key="route.id">
<md-card-area>
<div class="checkbox" v-show="hover == true && currentIndex===index" @mouseover="hover = true" >
<input type="checkbox" v-model="route.checked"/>
</div>
<div @mouseover="hover = true;currentIndex=index" @mouseout="function() { if (route.checked == false){ hover = false; currentIndex=-1;} }">
</div>
</md card-area>
</md-card>