Как добавить класс нажатому элементу?

Question

[pegas]

<div class="block-calculations__panel" v-for=" (i, index) in arr ">
        <span :data-col="index" @click="isActive = !isActive" v-bind:class="{ active: isActive }"></span> 
    </div>

Как правильно сделать чтобы не у всех span`ов класс появлялся, а только у нажатого?

Answer 1

[0xD34F]

Вместо общего isActive добавьте такое свойство каждому элементу в arr, и меняйте его:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: n.isActive }"
    @click="n.isActive = !n.isActive"
  ></span>
</div>

UPD. А, так вам надо, чтобы активным мог быть только один элемент... Переименуйте isActive в просто active, это будет индекс кликнутого элемента. Класс назначайте в случае равенства текущего индекса и active:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: active === i }"
    @click="active = active === i ? null : i"
  ></span>
</div>

Comments

[pegas]

для такой простой цели целый массив создавать? а если там 100+ элементов будет?

[0xD34F]

А arr у вас это что такое, не массив?

[Егор Живагин]

Артём, у тебя же и так массив создаётся через v-for , нет? Кол-во элементов роли не играет

Answer 2

[Алексей Шашенков]

<div class="block-calculations__panel" v-for=" (i, index) in arr ">
        <span :data-col="index" @click="isActive =i" v-bind:class="isActive==i?'active':''"></span> 
    </div>

view

Answer 3

[Dima Polos]

<span @click="method">

...
  methods: {
      method(e){
         e.target.classList.add('isActive');
   }
}

По идее можно так.
Пример