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

Question

[postya]

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

Мне нужно,чтобы при наведении мыши на какой либо блок, к нему применялся класс 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;
  }

Answer 1

[0xD34F]

Вырезаете обработчики mouseover и mouseout, динамическое назначение классов, свойство isShipHovered и метод chooseShipOnBoard.

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

UPD. Вынесено из комментариев:

мне нужно было использовать именно через script, потому,что я потом буду манипулировать этим методом chhoseShipOnBoard, например ещё добавлять классы к соседним блокам, чтобы при наведении выделялся не только текущий блок, но и несколько рядом находящихся блоков

Тогда сохраняйте индекс элемента, на который пользователь навёл курсор. Также сделайте метод, который будет получать индекс элемента и в зависимости от текущего выделенного возвращать классы, которые надо назначить:

data: () => ({
  hovered: null,
  ...
}),
methods: {
  getClasses(index) {
    return что-то, в зависимости от index и this.hovered;
  },
},

<span
  v-for="(n, i) in squares"
  @mouseover="hovered = i"
  @mouseout="hovered = null"
  :class="getClasses(i)"
>

https://jsfiddle.net/arw16jtf/

Comments

[postya]

мне нужно было использовать именно через script, потому,что я потом буду манипулировать этим методом chhoseShipOnBoard, например ещё добавлять классы к соседним блокам, чтобы при наведении выделялся не только текущий блок, но и несколько рядом находящихся блоков

[0xD34F]

И что, по-вашему мнению, об этом всём надо было догадаться, да? А вот и нет - телепатии не существует.

Дополнил ответ.

[postya]

0xD34F, я забыл про это написать=(

Answer 2

[Тигран Абрамян]

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

:class="{ hover: isShipHovered === index }"

Comments

[postya]

Благодарю! очень помогло