Javascript 在vue中，如何避免鼠标悬停影响列表中的每个元素？

我有一个v-for，列表中的每个元素都有一个mouseover事件。我希望当鼠标移到那个元素上时，一个变量值被改变，所以在那个元素的旁边会出现一个div（.checkbox div）。但是，由于所有元素都使用相同的变量，因此所有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变量，但它不会更改。

添加另一个名为

currentIndex

的变量：

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

  }
}

在v-for循环中添加

索引

，并使用悬停索引更新

当前索引

，并添加此条件

悬停==true&¤tIndex==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>

为什么不将

悬停

变量添加到

路由

中的每个路由对象？这样，您可以使用

@mouseover=“route.hover=true”

而不是我在问题中所说的：“我也尝试过使用hover变量，而不是更改route.hover变量，但它不会更改。”路由应该在使用它之前定义prop

hover

。它正确地添加了属性，问题是该值没有更改。您应该使用

$set

方法以使该路由成为被动的，

route.hover=true$设置（路线、索引、路线）

不要忘记在

v-for=“（路线、索引）路线”中添加
index