@postya

Как применить стиль только к конкретному элементу при наведении мыши в цикле v-for?

У меня имеется цикл, который отображает много блоков, значения блоков берется из массива

Мне нужно,чтобы при наведении мыши на какой либо блок, к нему применялся класс hover(меняется background color)
а если наыведу на другой блок, то у текущего пропадает этот класс и применятся к наведенному

Как это можно сделать?

На данный момент при наведении мыши класс применяется ко всем блокам, на какой бы блок я не навел

<span
        class="chars square" v-for="(square, index) in squares" :key="square"
        @mouseover="chooseShipOnBoard(index, square)"
        @mouseout="isShipHovered = false"
        :class="{hover: isShipHovered}"
      >{{ square}}


script:
squares: [
          '1', 'a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1', 'i1', 'j1',
          '2', 'a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2', 'h2', 'i2', 'j2',
          '3', 'a3', 'b3', 'c3', 'd3', 'e3', 'f3', 'g3', 'h3', 'i3', 'j3',         
        ],
        isShipHovered: false,

methods: {
chooseShipOnBoard(index, square) {
            this.isShipHovered = true;
      }
}

.hover {
    background-color: green;
  }
  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
TAbrahamyan
@TAbrahamyan
chooseShipOnBoard(index, square) {
   this.isShipHovered = index;
}


:class="{ hover: isShipHovered === index }"
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
Вырезаете обработчики mouseover и mouseout, динамическое назначение классов, свойство isShipHovered и метод chooseShipOnBoard.

Заменяете .hover на .square:hover - всё, больше ничего не надо. Если что-то можно сделать только через css - делайте это что-то только через css.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
11 авг. 2020, в 00:34
10000 руб./за проект
10 авг. 2020, в 23:01
1500 руб./за проект
10 авг. 2020, в 19:19
20000 руб./за проект