Как добавить/удалить класс по клику на элемент (Vue)?

Question

[K G]

Здравствуйте, не в доке, не на просторах интернета не могу найти как в Vue по клику на элемент добавить/снять класс конкретно у этого элемента? У меня есть 5 элементов например, я хочу, чтобы по клику на один, ему добавился класс 'active' и по повторному клику убрался.
Я пытаюсь сделать это через :class и обычный метод, который меняет true/false (как в доке), но у меня добавляются/удаляются на всех элементах сразу. Должен же быть какой-то просто аналог $(this).add/removeClass('active').

Comments

[Игорь]

1
Если я всё правильно понял, то можно создать массив объектов и в цикле создать элементы
А потом манипулировать этим массивом, изменяя значения.

2

<button class="style" v-bind:class="mode ? 'active' : ''" />

Result
<button class="style"  />
<button class="style active"  />

Answer 1

[Сергей delphinpro]

Должен же быть какой-то просто аналог $(this).add/removeClass('active').

Есть доступ к html элементу:

this.el.classList.add('active')
this.el.classList.remove('active')

Но это вообще неверный подход.

Отображение во вью должно быть основано на данных.

Answer 2

[Dmitry Barkowski]

<div class = "name active" ref = "needed" @click = "$refs.needed.classList.toggle('active')">
</div>