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

Question

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

Comments

[Леонид Князев]

Вы бы хоть код свой опубликовали в вопросе.

[myskypesla]

Леонид Князев, Я выложил, но он превратился в список на сайте )) поправил

Answer 1

[Evgeny Kulakov]

<template>
  <ul>
    <li v-for="i in 6" @click="current = i" :class="{active: current === i}">
      элемент списка
    </li>
  </ul>
</template>

data() {
  return {
    current: 0
  }
}

Comments

[Антон Антон]

хорошо!

Answer 2

[Антон Антон]

Как-то так: https://codepen.io/anon/pen/KREdoG

Answer 3

[Владислав Нагорный]

В vue использовать можно так
<div v-bind:class="{ active: isActive }"></div>

Документация тут

Answer 4

[Nikita Dergachov]

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

Answer 5

[Павел Корнилов]

Как сделал - не понятно.
На Ванилле делается так.