vue2使用element-ui动态生成checkbox后，点击checkbox不能勾选的问题

Question

v-for的数组是通过访问后台接口获取的，通过v-for生成checkbox后，点击checkbox不能勾选，但是能够看到其实绑定了的数组数据是已经发生了变化的。就是页面上的checkbox不会出现选中图案。
试过如果把数据静态绑定到data()里面一点事都没有，动态生成的就会出现这样的情况。好奇怪

<el-checkbox v-for="mpb in permissionBeans" :key="mpb.id" v-model="mpb.checked">{{mpb.name}}</el-checkbox>

点击后有点击的框框出现，但是不会被选中。

其实mpb.checked的值已经被改变，但是页面上没有出现选中的情况。

数组结构如下

permissionBeans=[
            {
                "id": 1,
                "name": "查看",
                "checked": false
            },
            {
                "id": 2,
                "name": "回访",
                "checked": false
            },
            {
                "id": 3,
                "name": "编辑",
                "checked": false
            },
            {
                "id": 4,
                "name": "分配",
                "checked": false
            }
        ]

Answer 1

问题解决。找出来了是因为对接口返回数据的处理的时候先把数据赋值到permissionBeans再执行逻辑导致的。。把逻辑处理完再赋值给permissionBeans就正常了。
多谢评论的朋友提供了思路。

Answer 2

我也遇到了这个问题，解决方法是这样的
把v-model="XXX"改为:checked="XXX"就好了

Answer 3

在checkbox组件中 v-model中不支持点语法 不能用属性的属性mpb.checked 此处应当使用mpb

Answer 4

我遇到的原因是id的数据类型的问题，一个用的number，一个用的string，就导致了选中但没有样式。

Answer 5

补充一种情况，在el-table中使用el-checkbox等组件时使用slot插槽的方式，如自定义表头，此时虽然用不上slot-scope="scope"但是必须要加上这一句话，此后el-checkbox才能动态变化，否则处于静态，页面上勾选状态不会随着绑定值变化

Answer 6

为什么我都会多一个复选框再每一行的后面，点掉前面的后面的就也消失了!

Answer 7

碰到了同样的问题，点击后有点击的框框出现，但是不会被选中。
试了楼上几位的方法，都不成功，后来检查数据结构，发现是 v-model 绑定的数据不是 Boolean 类型的，el-checkbox的v-model一定要绑定为 Boolean 类型，供大家参考。

在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。

Answer 8

今天遇到这种问题，查询文档后，发现是vue底层机制的问题，解决办法如下
不要再forEach等方法中直接操作object可以先赋值如：
{

let testArray = []
this.forEachArray.forEach(ele =>{
    testArray.push(ele)
})
this.useArray = testArray

}

Answer 9

可以看一下v-for的数组对象是否是一个ob_observer对象,可以打印看一下，如果不是说明不能动态监测值，导致点击无效。

Answer 10

我也遇到相同的问题，接受数据后添加ischeck属性，然后将数据遍历产生checkbox复选框，ischeck作为复选框是否选中的条件，然后就出现复选框有时候点击有变色但是未勾选
最后发现异步请求的得来的数据要先处理，就是加上ischeck，再赋值给this.xxx变量，就没问题了。而开始我是先赋值给this.xxx变量,再循环遍历添加ischeck属性，我怀疑因为vue没有动态监测到新添加的属性所以点击会有问题

Answer 11

遇到类似问题，已选中的点击没反应，未选中的点击出现蓝色边框没有选中状态，已解决，解决方法如下：
<el-checkbox-group v-model="form.categoryIds">

            <el-checkbox
              v-for="(item, index) in typeList"
              :key="item.arcaId"
              :label="item.arcaId"
              v-if="typeList && typeList.length > 0"
            >{{item.arcaName}}
            </el-checkbox>
          </el-checkbox-group>

这是复选框，form.categoryIds的值是[1,2]这种数组形式，需要从接口里获取的到数据处理一下，用this.$set，不能直接赋值。
let testArray = []

    response.data.categories.map(item => {
      testArray.push(item.arcaId)
      this.$set(this.form, 'categoryIds', testArray)
    })

这样就可以点击了