javascript - 在使用vue的时候，想实现在列表中进行选择部分item，并添加class

问题描述

问 题

我想在一个列表中选择群发对象，进行群聊

用的是vue2.0，我通过改变user对象中的isActive字段，来进行选中的状态，如果isActive为true，那就给他打钩，并且将他的id添加到数组里，如果为false，就删掉他

目前遇到的一个问题是，只能选中一个，但是id是添加进去了的，也能删除掉。但是就是没有勾选的效果。

HTML：

    <div class="crumb" v-for="item in localData">
        <div class="list-header">{{item.item}}</div>
        <div class="item-list" v-for="(user, index) in item.list" @click="patientCalendar(user, $event)">
            <div class="item">
                <div class="group" v-bind:class="{'show': isActiveGroup}">
                    <span class="mint-checkbox-core " v-bind:class="{'checked': user.isActive}"></span>
                </div>
                <img :src="user.headImg" alt="">
                <span class="username">{{user.name}}</span>
            </div>
        </div>
    </div>

JS：
patientCalendar(user, event) {
    if (!user.isActive) {
      user.isActive = true
      this.selectedUsers.push(user.patientUserGid)
    } else {
      user.isActive = false
      this.selectedUsers.splice(user.patientUserGid, 1)
    }
},

这个是UI交互效果，只能勾中一个

解决方案

代码太少没法判断，请确保数据都是响应式的。

检查 localData 和 item 数组增加元素的方式是否正确；

item 数组里的对象(user)的初始状态有给 isActive 初始值不，Vue 不能检测增加属性。

这篇关于javascript - 在使用vue的时候，想实现在列表中进行选择部分item，并添加class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！