Задать вопрос
1PeGaS
@1PeGaS

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

<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`ов класс появлялся, а только у нажатого?
  • Вопрос задан
  • 899 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Вместо общего 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>
Ответ написан
teknik2008
@teknik2008
Расскажите про GOLANG. Мне интересно
<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
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
dimovich85
@dimovich85
https://u-academy.net/
<span @click="method">

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

По идее можно так.
Пример
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы