How to add a class to the clicked element?

Question

Vue.js

<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>

How to make sure that not all spans have a class, but only the one that is pressed?

Answer 1

Instead of a generic isActive , add this property to each element in arr , and change it:

<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. Oh, so you want only one element to be active... Rename isActive to just active, this will be the index of the clicked element. Assign a class if the current index is equal to 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>

Answer 2

<span @click="method">

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

In theory it is possible.
Example