解決 Vue 動態生成 el-checkbox 點選無法賦值問題
阿新 • • 發佈:2020-12-24
最近遇到一個問題,在一個頁面需要動態渲染頁面內的表單,其中包括 checkbox 表單型別,並且使用 Element 元件 UI 時,此時 v-model 繫結的資料也是動態生成的
例如:
定義的 data 的 form 裡面是空物件,需要動態生成裡面的 key
export default {
data() {
return {
form: {}
}
},
}
從後端介面得到 checkList,這個就是動態生成的表單資料
v-for 迴圈 checkList,得到 key,然後直接 v-model="form.key" 動態生成 form 裡面的 key
<el-form-item :label="item1.name+`:`" v-for="item1 in checkList" :key="item1.id">
<el-checkbox-group v-model="form[`${item1.code}`]">
<el-checkbox
:label="item2.id"
v-for="item2 in item1.values"
:key= "item2.id">
{{ item2.value }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
問題來了
當頁面點選動態生成的 CheckBox 方框,會出現全選的情況,檢視 vue 資料,顯示如下:
正常的情況 CheckBox 的繫結資料型別是陣列形式
那我在動態生成的時候,就它置為陣列格式:
this.checkList.forEach(item => { let key = item.code this.form[key] = [] })
但還是沒用,會發現點選任何 CheckBox 都無法勾選
解決
這是 vue 的深入響應式原理,官方說法和解決方法:
Vue 不允許在已經建立的例項上動態新增新的根級響應式屬性 (root-level reactive property)
然而它可以使用 Vue.set(object, key, value) 方法將響應屬性新增到巢狀的物件上
現在明白了,可以使用 Vue.set 方法解決這個深入式響應原理
this.checkList.forEach(item => {
let key = item.code
this.$set(this.form, key, [])
})
完美解決~
部落格地址:https://ainyi.com/68