Vue動態(tài)生成el-checkbox點擊無法賦值的解決方法
前言
最近遇到一個問題，在一個頁面需要動態(tài)渲染頁面內(nèi)的表單，其中包括 checkbox 表單類型，并且使用 Element 組件 UI 時，此時 v-model 綁定的數(shù)據(jù)也是動態(tài)生成的
例如：
定義的 data 的 form 里面是空對象，需要動態(tài)生成里面的 key
export default {
data() {
return {
form: {}
}
},
}
從后端接口得到 checkList，這個就是動態(tài)生成的表單數(shù)據(jù)
v-for 循環(huán) checkList，得到 key，然后直接 v-model=“form.key” 動態(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>
問題來了
當頁面點擊動態(tài)生成的 CheckBox 方框，會出現(xiàn)全選的情況，查看 vue 數(shù)據(jù)，顯示如下：
綁定的數(shù)據(jù)居然是 Boolean 類型，怪不得會出現(xiàn)要么全部勾選，要不全部不選
正常的情況 CheckBox 的綁定數(shù)據(jù)類型是數(shù)組形式
假設(shè)我在動態(tài)生成的時候，就它置為數(shù)組格式：
this.checkList.forEach(item => {
let key = item.code
this.form[key] = []
})
但發(fā)現(xiàn)還是沒用，會發(fā)現(xiàn)點擊任何 CheckBox 都無法勾選
解決
這是 vue 的深入響應(yīng)式原理，官方說法和解決方法：
Vue 不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應(yīng)式屬性 (root-level reactive property)
然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對象上
現(xiàn)在明白了，可以使用 Vue.set 方法解決這個深入式響應(yīng)原理
this.checkList.forEach(item => {
let key = item.code
this.$set(this.form, key, [])
})
完美解決~
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
vue-cli3 項目優(yōu)化之通過 node 自動生成組件模板 generate View、Component
這篇文章主要介紹了vue-cli3 項目優(yōu)化之通過 node 自動生成組件模板 generate View、Component的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了ElementUI之Message功能拓展詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了詳解vue或uni-app的跨域問題解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了使用Vue-axios進行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進行數(shù)據(jù)交互的相關(guān)資料展開詳細內(nèi)容，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)或工作有所幫助2022-03-03
最近做項目遇到這樣的需求要求輸入4位或6位短信驗證碼，輸入完成后收起鍵盤。實現(xiàn)步驟大家參考下本文2017-12-12
這篇文章主要介紹了詳解vue實現(xiàn)坐標拾取器功能示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
解決vue-cli創(chuàng)建項目的loader問題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項目的loader問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看看吧2018-03-03
這篇文章主要介紹了key在Vue列表渲染時究竟起到了什么作用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家介紹了VUE實現(xiàn)token登錄驗證,詳細記錄實現(xiàn)token登錄驗證的步驟，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08