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);

問題就解決了