В vue, как запретить наведению указателя мыши на каждый элемент списка? - PullRequest
Новая
       125

В vue, как запретить наведению указателя мыши на каждый элемент списка?

0 голосов
/ 20 июня 2020

У меня есть 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, но это не сработало. Я также пробовал использовать вместо изменения переменной hover изменение переменной route.hover, но она не будет изменена.

1 Ответ

1 голос
/ 20 июня 2020

Добавьте еще одну переменную с именем currentIndex: 

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

  }
}

добавьте index в v-for l oop и обновите 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>
...