Можно ли не использовать getElementById во vue?

Question

[nurdus]

Есть поле 3 на 3 (div-ы). у каждой клетки есть координаты x и y.
Как сделать так чтобы при клике на клетку, соседние по краям клетки меняли цвет.

Сейчас у меня реализовано так (использую vue):
1) у каждой клетки id = 'x_y' и есть data-x, data-y;
2) при клике на div беру x и y и вычисляю координаты соседних клеток;
3) далее по ним (по координатам соседних клеток) нахожу id и меняю цвет.

Мне кажется, что не очень 'правильно' используя vue обращаться к getElementById.

Comments

[nurdus]

А как можно понять, что такой то элемент DOM связан с таким то объектом во vue, т.е. к какому свойству dom элемента нужно обратиться? или это нельзя сделать?

[Igor Koch]

nurdus: Это бы противоречило логике vue, т.к. интерфейс строится на данных, а не наоборот.
К одному объекту теоретически может быть привязано неограниченное количество элементов.

Answer 1

[Igor Koch]

Я бы реализовал с помощью простой матрицы, вместо цвета также можно принимать объект с множеством параметров {Цвет, размер и т.д.}
Например: https://jsfiddle.net/3tqmcg3a/2/

Answer 2

[Evgeny Kulakov]

Если не обращать внимание на разметку, у вас в шаблоне должно быть что-то вида:

<template v-for="cell in cells">
<cell :color="cell.color" @click="changeAround(cell)"></cell>
</template>

changeAround(cell) {
 // change cells color шт cells by using input cell

}

Смысл такой:
У вас есть массив клеток cells.
У вас есть компонент клетки и входной параметр у него - цвет.
При клике на cell вызывается обработчик, который вычисляет на основании данных клетки(порядковый номер, позиция) соседние клетки у которых нужно изменить цвет. Далее реактивно обновляется шаблон.