这样的效果怎么实现？

Question

点击元素加上一个 class 设置背景色，最多选取五个
html

  <span class="hobby-chl2" v-if="!disable">帮你找到合适的Ta（{{num}}/5）</span>
  <div class="hobby-list1" v-if="!disable">
    <ul>
      <li
        v-for="(item,index) in interest_tag"
        :key="index"
        :class="{'active': tabIndex == item.id}"
        @click="isclick && onClick(item)"
      >{{item.title}}</li>
    </ul>
  </div>

数据

  data () {
    return {
        interest_tag: [这里面有数据],
        num: 0,
        tabIndex: 0,
        form: {
            interest_tag_ids: []
        }
    }
  }

方法

  onClick (e) {
      let that = this
      that.form.interest_tag_ids.push(e.id)
      that.num = that.form.interest_tag_ids.length
      that.tabIndex = e.id
      if (that.form.interest_tag_ids.length === 5) {
        that.isclick = false
      }
  },

为什么只能有一个元素添加class 点击第二个元素的话，第一个元素class就会没有，还有重复点一个元素也会重复添加

这要怎么解决，求大哥帮帮忙~~~~

Answer 1

帮你改造了下代码，你可以参考下
demo
大致思路：
循环给数组对象添加isActive的字段，当个数小于5的时候，点击变为true,当超过5的时候，点击新的标签不会触发，点击已选中的进行取消选中的操作

Answer 2

tabIndex只保留了最后一次点击的 ID，而不是所有点击过的

Answer 3

把这个去掉,给你个思路是给循环的数组加一个select,当select时true的时候添加背景色