Vue动态绑定对象中没有的参数

前言

问题出现：
因为表单配置当中有需要根据模板动态配置属性的功能，所有的动态属性都配置在同一个对象当中，初始化时，该对象是空对象，切换模板的时候才会给对象动态添加属性。
之后发现新增加的表单可以显示初始的内容，但是在表单中改变时，表单校验获取不到新改变的值
如下图所示。

初始化时代码如下

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, ‘’)

这样就可以解决动态添加的对象属性也可以交互变化了。