@myskypesla

Как правильно удалить классы?

Привет всем.

Есть ul в котором 6 li с классом .item.active

Мне нужно на Vue.js, если это возможно, если нет, то на Vanilla JS, реализовать следующее:

Кликаю на один li, а у всех остальных удаляется класс .active.

Я сделал так, но не знаю верно ли?

<template>
  <ul>
    <li v-for=“i in 6 ref=“li” @click=“addClass”>элемент списка</li>
  </ul>
</template>

<script>
  methods: {
    addClass() {
      const elements = this.$refs.li;
      elements.forEach((item) => {
        item.classList.toggle(‘active’);
      });
    }
  }
</script>
  • Вопрос задан
  • 443 просмотра
Решения вопроса 2
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
<template>
  <ul>
    <li v-for="i in 6" @click="current = i" :class="{active: current === i}">
      элемент списка
    </li>
  </ul>
</template>


data() {
  return {
    current: 0
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
В vue использовать можно так
<div v-bind:class="{ active: isActive }"></div>

Документация тут
Ответ написан
@vanillathunder
<template>
<div>
    <li v-bind:class="{ active: isActive }" @click="setActive(false)"></li>
    <li v-bind:class="{ active: isActive }" @click="setActive(false)"></li>
    <li v-bind:class="{ active: isActive }" @click="setActive(false)"></li>
    <li v-bind:class="{ active: isActive }" @click="setActive(false)"></li>
</div>
</template>
<script>
...
setActive: function(active){
    this.isActive = active;
}
</script>
Ответ написан
KorniloFF
@KorniloFF
Ищу работу по font-end / JS
Как сделал - не понятно.
На Ванилле делается так.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
07 авг. 2020, в 19:51
2000 руб./за проект
07 авг. 2020, в 19:24
4000 руб./за проект