宝哥软件园

Vue动态生成el-checkbox并点击无法分配的解决方案

编辑:宝哥软件园 来源:互联网 时间:2021-08-27

前言

最近遇到一个问题。当页面需要动态呈现页面中的表单时,包括复选框表单类型,当使用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,[])})完美解决~

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。

更多资讯
游戏推荐
更多+