前言
问题出现:
因为表单配置当中有需要根据模板动态配置属性的功能,所有的动态属性都配置在同一个对象当中,初始化时,该对象是空对象,切换模板的时候才会给对象动态添加属性。
之后发现新增加的表单可以显示初始的内容,但是在表单中改变时,表单校验获取不到新改变的值
如下图所示。
初始化时代码如下
html中的内容如下
如上,校验就一直都没有成果,但是初始值其实是赋值上去了,只不过去改变这个值的时候页面并没有变化
解决
VUE文档中有说明
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
而this.myForm.dynamicParam[element.enName] = ''
只是给对象添加了一个普通属性,并没有转换为getter/setter,而导致页面上的变化不能及时更新。所以赋值应该改为如下操作
this.$set(this.myForm.dynamicParam, element.enName, ‘’)
这样就可以解决动态添加的对象属性也可以交互变化了。