登录

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

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

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

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

HTML:

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

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交互效果,只能勾中一个

# JavaScript
PHPz PHPz 2336 天前 683 次浏览

全部回复(2) 我要回复

  • 我想大声告诉你

    我想大声告诉你2017-05-19 10:27:55

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

    检查 localDataitem 数组增加元素的方式是否正确;

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

    回复
    0
  • 某草草

    某草草2017-05-19 10:27:55

    如果你用的是谷歌浏览器,建议添加一个扩展程序Vue.js devtools,然后打开控制台,你点击后看下你的数据状态是啥样的,应该就能找到问题所在了。

    回复
    0
  • 取消 回复 发送