需求描述:
最近项目有一个小需求是这样的,表单中的某些表单项是动态渲染的,当表单中的某一字段符合条件的时候,调用后台接口获取数据,根据后台返回的数据再为表单增加对应的 FormItem。
问题描述:
需求确实不难,但当我实际写的时候遇到一点问题,动态渲染的表单项校验规则失效了。。。
下面我们来理一下需求的实现思路,找一找问题的原因。
需求思路:
下面我们结合代码来理一下:
iview Form表单控件 model属性绑定的值,name,num是动态渲染的表单项v-model的值,为了方便后续扩展并没有直接写死,而是根据后端返回的数据去动态添加。
发送请求,获取后台数据,并添加到 表单model数据中。
问题出现了,这样直接导致了动态增加的表单校验失效了,如下图:
即使有数据,点击确定按钮,表单校验还是不通过。。。。
问题探究:
当我直接将代码改为下图这样的,是没有问题的:
将表单绑定的数据改为写死的,而不动态添加是可以的,于是对比了两种写法,发现了问题所在:
上述的两张图片中,我们可以看到直接写死的形式,name 和 num都是响应式数据;而动态添加的数据却失去了响应式,如下图所示:
这就是问题的所在,所以有了下面的解决方案。
解决方案:
使用 vue提供的$set Api为对象添加响应式的name属性和num属性。