Vue動(dòng)態(tài)生成el-checkbox點(diǎn)擊無(wú)法賦值的解決方法
前言
最近遇到一個(gè)問(wèn)題，在一個(gè)頁(yè)面需要?jiǎng)討B(tài)渲染頁(yè)面內(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>
問(wèn)題來(lái)了
當(dāng)頁(yè)面點(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)還是沒(méi)用，會(huì)發(fā)現(xiàn)點(diǎn)擊任何 CheckBox 都無(wú)法勾選
解決
這是 vue 的深入響應(yīng)式原理，官方說(shuō)法和解決方法：
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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue-cli3 項(xiàng)目?jī)?yōu)化之通過(guò) node 自動(dòng)生成組件模板 generate View、Component
這篇文章主要介紹了vue-cli3 項(xiàng)目?jī)?yōu)化之通過(guò) node 自動(dòng)生成組件模板 generate View、Component的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了ElementUI之Message功能拓展詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了詳解vue或uni-app的跨域問(wèn)題解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue中常用的縮寫(xiě)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)或工作有所幫助2022-03-03
最近做項(xiàng)目遇到這樣的需求要求輸入4位或6位短信驗(yàn)證碼，輸入完成后收起鍵盤。實(shí)現(xiàn)步驟大家參考下本文2017-12-12
詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
解決vue-cli創(chuàng)建項(xiàng)目的loader問(wèn)題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項(xiàng)目的loader問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看看吧2018-03-03
這篇文章主要介紹了key在Vue列表渲染時(shí)究竟起到了什么作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
VUE實(shí)現(xiàn)token登錄驗(yàn)證
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)token登錄驗(yàn)證,詳細(xì)記錄實(shí)現(xiàn)token登錄驗(yàn)證的步驟，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08