前言
最近遇到一个问题。当页面需要动态呈现页面中的表单时,包括复选框表单类型,当使用Element组件UI时,由v-model绑定的数据也会动态生成
例如:
定义数据的形式是一个空对象,其中的键需要动态生成
export default { data(){ return { form : } } },}从后端接口获取核对表,这是动态生成的表单数据。
V-for loops核对表获取密钥,然后直接v-model="form。键”来动态生成表单中的键
El-form-item : label=' item 1 . name `:` ' v-for='清单中的item 1 ' : key=' item 1 . id ' El-checkbox-group v-model=' form [` $ { item 1 . code } `]El-checkbox : label=' item 2。项目1中的id“v-for=”项目2。values' : key=' item2。id“{ item 2。值} }/El-复选框/El-复选框-组/El-表单-项目问题来了
当页面点击动态生成的复选框时,所有选择都会出现。检查vue数据,如下所示:
绑定的数据实际上是布尔类型的,所以它们全部被检查或者没有一个被检查也就不足为奇了
通常,CheckBox的绑定数据类型是数组的形式
假设我在动态生成它时将它放在数组格式中:
这个。清单。foreach (item={let key=item。编码这个。form [key]=[]})仍然没有用,你会发现点击它不能勾选任何CheckBox。
解决
这是vue的深度回应原则、官方声明和解决方案:
Vue不允许将新的根级反应属性动态添加到已创建的实例中
但是,它可以使用Vue.set(对象、键、值)方法向嵌套对象添加响应属性
现在很明显,这个深度响应原理可以通过使用Vue.set方法来解决
这个。清单。foreach (item={let key=item。编码这个。$ set(这个。form,key,[])})完美解决~
摘要
以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。