How to properly remove classes?

Question

JavaScript

Hi all.
There is a ul in which there are 6 lis with the .item.active class.
I need to implement the following in Vue.js, if possible, if not, then in Vanilla JS:
I click on one li, and the .active class is removed from all the others.
I did this, but I don't know if it's right?

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

Answer 1

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

data() {
  return {
    current: 0
  }
}

Answer 2

In vue you can use it like this
Documentation here

Answer 3

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

How he did it is not clear.
This is how it works in Vanilla .