从vue.js的下拉列表中选择多个项目

Question

enter code here我尝试将下拉列表与所选的多个项目一起使用，我首先进行了下拉，然后更改了要选择的CSS类项目。其次，我检查了数组是否为选择的已经删除了class。但是不起作用

<template  lang="pug" >
   div.d-flex.justify-content-between.ml-3-xs
    .circle-item__circle.hover-pointer(:style="{ backgroundColor: randomColor({seed:currentUser}) }") {{currentUser| initials}}
    b-dropdown.ml-3-xs.flex-nowrap(
           right=''
           trigger="click",
           placement="bottom-start")
           template(slot='button-content') 
              font-awesome-icon(:icon="['fal', 'users']")
           b-dropdown-menu.ml-3-xs( slot="dropdown")
           b-dropdown-item
           .dropdownItems
              span.b-dropdown-link.d-flex(
                v-for='(item,index) in users'
                @click="onSelect(item.name, index)"
              )
                .circle-item__circle.ml-3-xs.m-t.selectUser(
                  :style="{ backgroundColor: randomColor({seed: item.name}) }"
                   v-bind:class="getClass(index)"
                  ) {{item.name| initials}}
                span.align-self-center.mx-3-xs  {{item.name}}

</template>

<script>
import randomColor from 'randomcolor'
export default {
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      userSelected: [],
      setIndex: [],
      classActive: ''
    }
  },
  beforeCreate() {
    this.randomColor = randomColor
  },
  computed: {
    currentUser() {
      return (this.users && this.users.length) ? this.users[0].name : {}
    }
  },
  methods: {
    onSelect(item, index) {
      for (let i = 0; i < this.userSelected.length; i++) {
        if (this.userSelected[i] !== item) {
          this.setIndex.push(index)
          this.userSelected.push(item)
          this.classActive = 'isActive'
          this.$emit('input', this.userSelected)
        } else {
          this.classActive = ''
        }
      }
    },
    getClass(index) {
      for (var i = 0; i < this.setIndex.length; i++) {
        if (this.setIndex[i] === index) {
          return this.classActive
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.isActive {
  border :2px solid #5d9de4;
}

</style>

这是我的鳕鱼，您能检查一下我的代码有什么问题吗？