Vue動(dòng)態(tài)生成el-checkbox點(diǎn)擊無法賦值的解決方法
前言
最近遇到一個(gè)問題，在一個(gè)頁面需要?jiǎng)討B(tài)渲染頁面內(nèi)的表單，其中包括 checkbox 表單類型，并且使用 Element 組件 UI 時(shí)，此時(shí) v-model 綁定的數(shù)據(jù)也是動(dòng)態(tài)生成的
例如：
定義的 data 的 form 里面是空對(duì)象，需要?jiǎng)討B(tài)生成里面的 key
export default {
data() {
return {
form: {}
}
},
}
從后端接口得到 checkList，這個(gè)就是動(dòng)態(tài)生成的表單數(shù)據(jù)
v-for 循環(huán) checkList，得到 key，然后直接 v-model=“form.key” 動(dòng)態(tài)生成 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>
問題來了
當(dāng)頁面點(diǎn)擊動(dòng)態(tài)生成的 CheckBox 方框，會(huì)出現(xiàn)全選的情況，查看 vue 數(shù)據(jù)，顯示如下：
綁定的數(shù)據(jù)居然是 Boolean 類型，怪不得會(huì)出現(xiàn)要么全部勾選，要不全部不選
正常的情況 CheckBox 的綁定數(shù)據(jù)類型是數(shù)組形式
假設(shè)我在動(dòng)態(tài)生成的時(shí)候，就它置為數(shù)組格式：
this.checkList.forEach(item => {
let key = item.code
this.form[key] = []
})
但發(fā)現(xiàn)還是沒用，會(huì)發(fā)現(xiàn)點(diǎn)擊任何 CheckBox 都無法勾選
解決
這是 vue 的深入響應(yīng)式原理，官方說法和解決方法：
Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性 (root-level reactive property)
然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上
現(xiàn)在明白了，可以使用 Vue.set 方法解決這個(gè)深入式響應(yīng)原理
this.checkList.forEach(item => {
let key = item.code
this.$set(this.form, key, [])
})
完美解決~
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
快速修改antd?vue單個(gè)組件的默認(rèn)樣式
這篇文章主要介紹了快速修改antd?vue單個(gè)組件的默認(rèn)樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-08-08
這篇文章主要為大家詳細(xì)介紹了原生echart和vue-echart的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯
最近開發(fā)項(xiàng)目,關(guān)于表格的數(shù)據(jù)操作比較多,這個(gè)地方個(gè)人覺得比較難搞,特此記錄一下,這篇文章主要給大家介紹了關(guān)于如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯的相關(guān)資料,需要的朋友可以參考下2024-08-08
vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
一文詳解如何創(chuàng)建Vue3項(xiàng)目及組合式API
Vue3提供了一種組合式API,可以用來構(gòu)建可復(fù)用的組件和應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建Vue3項(xiàng)目及組合式API的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽屬性的使用和區(qū)別解析
這篇文章主要介紹了Vue中的methods、computed計(jì)算屬性和watch監(jiān)聽屬性的使用和區(qū)別,本文通過示例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
這篇文章主要為大家介紹了一款mapbox gl開箱即用的地圖引擎庫，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
實(shí)例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法
這篇文章主要介紹了vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
有時(shí)候不希望已經(jīng)請求過的數(shù)據(jù),再次請求重復(fù)執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關(guān)于如何巧用Vue緩存函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-09-09