Смена активных классов

Question

Столкнулся с проблемой , что при кликах на пункты , должен добавляться активный класс , то есть когда я кликаю на другой пункт , предыдущий становиться обычным текстом , а то что я выбрал к нему добавляется класс

const app = new Vue({
  el: '#sklad',
  data: {
    active: 0,  
  },
});

.active {
   color: yellow;
   font-family: Montserrat-Bold, sans-serif;
   font-weight: 700
}

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div class="wraper">
      <div class="sklad" id="sklad">
            <div class="tabs1" @click:class="{ active: isActive }">
               <div id="sklad-one" class="tab active">Один</div>
               <div id="sklad-two" class="tab">Два</div>
               <div id="sklad-thri" class="tab">Три</div>
               <div id="sklad-forth" class="tab">Четыре</div>
               <div id="sklad-five" class="tab">Пять</div>
            </div>
     </div>
   </div>

Answer 1

вы можете сделать легко. Вы можете выводить пункты через v-for и создать функцию допустим clickDiv и передать ей id от пункта и в функции сравнивать id с текущим , если он совпадает то присваивать класс активный. Чтобы сделать 1ый элемент сразу активным можно указав id = 1. Вот накидал пример, ссылка находится в комментариях

БЛОГ НА HUSL

Смена активных классов

Ответы (1 шт):