这样的效果怎么实现?

洛阳彭于晏
  • 5
新手上路,请多包涵

image.png
点击元素加上一个 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就会没有,还有重复点一个元素也会重复添加

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

回复
阅读 281
3 个回答
✓ 已被采纳

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

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

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

你知道吗?

宣传栏