Vue + Element UI 循环生成checkbox无法选中

背景：需要根据后端返回的数据生成相对应数量的checkbox，并勾选需要更改状态的数据传递给后端，如下图

HTML部分：

<el-checkbox  v-model="item.checked" :key="item.id">el-checkbox>

一开始的写法，就是获取到数据，遍历生成checked属性

 getUserAuditList({
                   ...
                }).then(res => {
                    if (res.data.code == 0) {
                        this.list = res.data.list;
                        if (this.list.length > 0) {
                            this.list.map((item, index) => {
                                   item.checkd = false;
                            });
                        }
                    }
                }).catch(err => { })

打印出来发现确实存在checked属性，值为false，但是checkbox一直无法选中

原来这是 vue 的深入响应式原理导致的，官方说法和解决方法：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)
然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

于是改成

  this.$set(item, 'checked', false);

问题就解决了