在vue中，如何不让mouseover影响列表的每一个元素？

Question

我有一个 v-for，列表的每个元素都有一个鼠标悬停事件。我希望当鼠标悬停在该元素上时，变量值会发生变化，因此 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 变量但它不会被更改。

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>

在vue中，如何不让mouseover影响列表的每一个元素？

In vue, how to not allow mouseover to affect every element of the list?

javascript

vue.js

hover

mouseover

v-for